Question

我有导航（自制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">

我需要弄清楚在body标签中添加了哪个网站或哪个类，并在导航中显示“状态”。

伪代码：

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

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

Answer 1

使用attribute-equals selector [data-filter=one]查找匹配的a-tag：

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

Fiddle

Answer 2

如果我理解你：

$(document).ready(function() { 

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

 });

Answer 3

那么，使用伪代码：

if($('body').attr("class")){
   var classBody = $('body').attr("class");
   var site = classBody.replace("site ", "");

   $("#navmenu li a[data-filter=" + site + "]").find("span").show();
}

Jquery - 在Navigation中查找属性

3 个答案: