0

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

<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" ，将整个导航移动到头文件，然后只在每个页面上指定当前类？

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

4

4 回答 4

0

在您当前的页面脚本中使用它

使用 jquery 的东西..

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

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

于 2013-04-06T10:41:55.473 回答
0

将 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");
}

});  
})
于 2013-04-06T11:10:18.040 回答
0

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

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

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

并且您的主页/关于页面有一个正文标签，例如： <body id="pgHome">或<body id="pgAbout">

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

#pgHome .navHome,
#pgAbout .navAbout
{
 // styles to highlight this item
}
于 2013-04-06T11:15:37.797 回答
0

通过结合所有答案，我得到了它完全按照我想要的方式工作。

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

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

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

于 2013-04-06T12:48:38.317 回答