Jquery - 在导航中查找属性

Jquery - Find attributes in Navigation

本文关键字：查找 属性 导航 Jquery      更新时间：2023-09-26

我有一个导航（自制的HTML，没有CMS）。

法典： 

<ul id="navmenu" class="open">
        <li><a href="/" class="nav-home"><i class="menu-icon icon-home"></i></a></li>
        <li><a href="#" data-filter="one"><i class="menu-icon icon-one"></i><span>One</span></a></li>
        <li><a href="#" data-filter="two"><i class="menu-icon icon-two"></i><span>Two</span></a></li>
        <li><a href="#" data-filter="three"><i class="menu-icon icon-three"></i><span>Three</span></a></li>
        <li><a href="#" data-filter="four"><i class="menu-icon icon-four"></i><span>Four</span></a></li>
    </ul>

现在我想实现一个"当前"状态。
例：
如果加载了页面"ONE"，则图标跨度文本应显示在图标旁边（正常状态：display:none;）
加载主页时，网站名称位于正文标记中，如下所示： 

<body class="site one">

我需要弄清楚在正文标签中添加了哪个站点或哪个类，并在导航中显示"状态"。

伪代码： 

If "class" is in body >
search for "class" in navigation (search for data-"class" attribute)>
and display span   / set class "active"

你能把我推向正确的方向吗？谢谢！

使用属性等于选择器[data-filter=one]查找匹配的 a 标记：

var site = $("body").attr("class").replace("site ", "");
// find any a-tag with attribute data-filter=site, and show any child span-tags
$("#navmenu a[data-filter='" + site + "']").find("span").show();

小提琴

如果我理解你：

$(document).ready(function() { 
    if ($('body').hasClass('Some Class')) {
           $("#navmenu").css("display", "block");
           $("#navmenu:first-child").addClass("active");
    }
    else {
           //whatever else you care to do
     }
 });

好吧，相应地使用您的伪代码：

if($('body').attr("class")){
   var classBody = $('body').attr("class");
   var site = classBody.replace("site ", "");
   $("#navmenu li a[data-filter=" + site + "]").find("span").show();
}
相关文章：