Question

我想将我网站上所有页面共有的所有菜单项都放在一个头文件中。问题在于我需要为当前菜单项定义一个类，以便它改变颜色。我使用superfish作为菜单，这是一个非常简单的模型...

<nav> 
  <ul class="sf-menu">
     <li id="first-li"><a href="index.php">Home</a></li>
      <li class="current"><a href="page1.php">Page 1</a>
         <ul>
             <li><a href="submenu1.php">Submenu 1</a> </li>
             <li><a href="submenu2.php">Submenu 2</a> 
                 <ul>
                 <li><a href="subsubmenu1.php">SUBSubmenu 1</a> </li>
                 </ul>
             </li>
          </ul>

      </li>
      <li><a href="page2.php">Page 2</a> </li>
       <li><a href="page3.php">Page 3</a></li> 
       <li><a href="page4.php">Page 4</a></li>
   </ul>
 </nav>

是否可以删除class =“current”，将整个nav移动到头文件，然后只在每个页面上指定当前类？

我的实际菜单代码要大得多，这就是为什么我不想在每一页上重复它。

Answer 1

在当前页面脚本中使用它

使用jquery ...

$('.sf-menu li a').click(function() {
        $('.sf-menu li.current').removeClass('current');
        $(this).closest('li').addClass('current');
    });

在这里找到小提琴.. http://jsfiddle.net/VudYx/

Answer 2

将class =“current”添加到标头中的index.php li，并在标题中使用以下jQuery代码。

$(document).ready(function() {
var curUrl = window.location.pathname;
curUrl=curUrl.replace(/\/$/, "");//support urls with or without trailing slash
$( ".sf-menu li" ).each(function(i) {

if(($(this).children().length > 0) && ($(this).children(":first").attr("href").split('/').pop()==curUrl.split('/').pop()))
{
$( ".sf-menu li" ).removeClass("current");
$(this).addClass("current");
}

});  
})

Answer 3

就我个人而言，我会使用CSS实现这一目标。

如果每个菜单项<li>都有自己的类，并且您的<body>每页都有唯一的ID，则可以适当设置当前项的样式，以便：

<li class="navHome">Home</li>
<li class="navAbout">About<li>

并且您的home / about页面有一个body标记，以便： <body id="pgHome">或<body id="pgAbout">

然后你可以直接设置当前页面菜单项的样式：

#pgHome .navHome,
#pgAbout .navAbout
{
 // styles to highlight this item
}

Answer 4

通过结合所有答案，我得到了我想要的工作。

首先我给所有第一层菜单项ID id，我想要突出显示的那些，然后在每个页面上我移动当前类... ...

<script>
$(document).ready(function() {
$( ".sf-menu li" ).removeClass("current");
$( "#menu2" ).addClass("current");  
}); 
</script>

干净，简单，无需点击即可工作，感谢所有回答你帮助的人。

声明后可以设置项目的类吗？

4 个答案: