如何使用javascript/jQuery激活菜单链接

How to make a menu link active using javascript/jQuery?

本文关键字：激活 菜单 链接 jQuery 何使用 javascript      更新时间：2023-09-26

我在一个公共头文件中有一个静态菜单。每当我通过点击菜单中的链接访问任何页面时，我都需要点击链接上的图像作为激活链接的指示符。

下面是我使用的菜单的HTML

<ul id="in-menu">
    <li><a href="unleashing-your-heart" >home</a></li>
    <li><a href="fromdaniella" >from Daniella</a></li>
    <li><a href="material-list" >material list</a></li>
    <li><a href="program" >program</a></li>
    <li><a href="testimonials-2" >testimonials</a></li>
    <li><a href="#">login</a></li>
</ul>

如何使用jQuery或javascript来实现所需的功能？

这个不需要javascript/jQuery

您可以做的是在<body>元素或主容器div上的HTML结构顶部附近的某个位置为每个页面提供一个唯一的ID或Class。。然后给菜单中的每个链接一个唯一的ID或类（如果使用类，它们可以与第一个相同）

例如

<body class="nm-unl">
   <ul id="in-menu">
     <li class="nm-unl"><a href="unleashing-your-heart" >home</a></li>
     <li class="nm-dan"><a href="fromdaniella" >from Daniella</a></li>
     <li class="nm-mat"><a href="material-list" >material list</a></li>
     <li class="nm-pro"><a href="program" >program</a></li>
     <li class="nm-tes"><a href="testimonials-2" >testimonials</a></li>
     <li class="nm-log"><a href="#">login</a></li>
   </ul>
</body>

因此，在你的主页上，body类可能是nm-unl，而你的登录页面上可能有body类nm-log等。菜单本身永远不会改变，所以它仍然可以在一个公共文件中

然后在CSS中，每个链接都可以被专门针对。。假设你的普通链接没有图像，但:hover和你的"当前"页面有

#in-menu a {background: none;}
#in-menu a:hover {background: url(image.png) no-repeat top center;}

然后，您可以将新的/特定的选择器分组到悬停规则选择器中，这些规则比普通的#in-menu a {}规则更具体，而且它们只适用于您的"当前页面链接"，即当页面上的两个类相同时

.nm-log #in-menu .nm-log a,
.nm-tes #in-menu .nm-tes a,
.nm-pro #in-menu .nm-pro a,
.nm-mat #in-menu .nm-mat a,
.nm-dan #in-menu .nm-dan a,
.nm-unl #in-menu .nm-unl a,
#in-menu a:hover {background: url(image.png) no-repeat top center;}

您仍然需要选择器中的#in-menu ID以及这两个类，因为否则选择器将没有足够的权重来覆盖默认规则

jQuery解决方案将以类似的方式工作，逻辑将是相同的。您仍然需要一个唯一的页面指示符，即主体类或ID，然后检查主体ID/class并将当前类添加到相关的匹配链接中。

这里有一个基于jquery的解决方案：

1） 识别每个页面的

2） 将该id与您的菜单项匹配

3） 相应地更改css

<script>
    pageID = $('#pageID').val();
    $( "li" ).each(function( index ) {
        listItemText = $(this).html();
        listItemText = listItemText.toLowerCase();
        if(listItemText == pageID)
            {
                $(this).css('color','red');
            }
    });
</script>
<style>
    li{
        color:green;
    }
</style>
<input type="hidden" id="pageID" value="contact" />
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Portfolio</li>
    <li>Contact</li>
</ul>

http://jsfiddle.net/CnEsF/

每一步都有很多方法，因此我的回答风格就是这样。每个步骤都可以以不同的方式执行。识别页面可能涉及使用隐藏输入或其他DOM元素，或者解析URL。匹配将要求您标准化您的脚本，这样您的条件就不会失败。。。我使用了小写的方法，但还有其他方法。最后，可以通过分配一个已经具有样式的新类、使用jquery修改DOM，甚至在使用PHP构建页面时分配正确的类来更改CSS。

希望这能帮助

相关文章：