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

Check page title is contained within link attribute and assign active class using jQuery

本文关键字：jQuery 活动 分配 属性 标题 是否 包含 链接 检查      更新时间：2023-09-26

>我正在构建一个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>

而javascript目前是

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

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

在每个函数中更改为 $（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
        }
    });

试试这个，把你的脚本包装在文档中准备好了。 我稍微改变了你的功能。

    <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>

由于上面的两个帖子，我现在已经解决了这个问题。这是完整的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干预来分配活动链接。

相关文章：