Question

我正在构建一个jQuery函数来更改导航栏链接的颜色。我想在导航栏中标识链接的数据属性，并将其与页面的当前标题进行比较。

然后，我想查看当前页面标题是否包含锚标记数据属性，如果结果为真，则查看addClass("active");是否为html。一个关键要求是不匹配大小写。

以下是我对应的javascript和<ul class="top nav"> <li><a class="first" href="http://www.fishwebsite/" name="link" data-index="Home">Home</a></li> <li><a href="http://www.fishwebsite/about-us/" name="link" data-index="About us">About us</a></li> <li><a href="http://www.fishwebsite/our-boats/" name="link" data-index="Our boats">Our boats</a></li> <li><a href="http://www.fishwebsite/product-list/" name="link" data-index="Product list">Product list</a></li> <li><a href="http://www.fishwebsite/recipes/" name="link" data-index="Recipes">Recipes</a></li> <li><a href="http://www.fishwebsite/contact/" name="link" data-index="Contact us">Contact us</a></li> </ul>

    var current_title = (document).attr("title");

    $("a[name=link]").each(function () { 

        var a = $("a[name=link]").attr("data-index"); 

        //returns true or false...
        var exists = current_title.test(a);

        if(exists) {
            $(a).addClass("active");
        } 

        else {
          //false statement..do whatever
        }

    });

目前javascript是

{{1}}

有人可以帮助我吗？我有一个活动链接的CSS样式，它与通常的导航项目不同，因此给人的印象是网站上的“活动”页面。

Answer 1

在每个函数中更改为$（this），因为您选择了每个项目。

 var current_title = (document).attr("title");
    $("a[name=link]").each(function () { 

        var a = $(this).attr("data-index"); 

        //returns true or false...
        var exists = current_title.test(a);

        if(exists) {
            $(this).addClass("active");
        } 

        else {
          //false statement..do whatever
        }

    });

Answer 2

试试这个，将文档包装在文档中。我稍微改变了你的功能。

    <script>
$(document).ready(function(){
var current_title = $(document).attr("title");

$("a[name=link]").each(function () { 

    var a = $(this).attr("data-index"); 

    //returns true or false...
    var exists = current_title.indexOf(a)>0;

    if(exists) {
        $(a).addClass("active");
    } 

    else {
      //false statement..do whatever
    }

    });

});
</script>

Answer 3

我已经解决了上述两个帖子的问题。这是完整的HTML和JS。

<ul class="top nav">
        <li><a class="first" href="http://www.fishwebsite/" name="link" data-index="Home">Home</a></li>             
        <li><a href="http://www.fishwebsite/about-us/" name="link" data-index="About us">About us</a></li>
        <li><a href="http://www.fishwebsite/our-boats/" name="link" data-index="Our boats">Our Boats</a></li>
        <li><a href="http://www.fishwebsite/product-list/" name="link" data-index="Product list">Product list</a></li>
        <li><a href="http://www.fishwebsite/recipes/" name="link" data-index="Recipes">Recipes</a></li>
        <li><a href="http://www.fishwebsite/contact/" name="link" data-index="Contact us">Contact us</a></li>               
    </ul>

和Javascript

$(document).ready(function() {
    var current_title = $(document).attr("title");

    $("a[name=link]").each(function() { 

        var a = $(this).attr("data-index"); 

        var exists = current_title.indexOf(a)>0;

        if(exists) {
            $(this).addClass("active")
        } 

        else {
           // $(this).removeClass('active');
        }

    });

});

添加$(this)代替(a)是一个很好的提示，因为它挑出了相关链接，Nishans添加>0完成了工作代码。

<强>缺点

区分大小写。 data-index值必须与标题的大小写完全匹配，否则将不会分配active链接。

更长的锚标记，添加了name属性和data-index。

<强>优点

在构建网站时，可以非常轻松地匹配使用jQuery和title以及data-index分配有效链接的有效方式。没有服务器端，凌乱的PHP干预来分配活动链接。

检查页面标题包含在链接属性中，并使用jQuery分配活动类

3 个答案: