Question

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

下面的

是我正在使用的菜单的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来实现所需的功能？

Answer 1

你不需要javascript / jQuery

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

e.g。

<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 /类并将当前类添加到相关的匹配链接。

Answer 2

这是一个基于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的更改。

希望这会有所帮助

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

2 个答案: