2

I have a navigation (selfmade HTML, no CMS).

Code: 

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

Now I want to realize a "current" state.
Example:
If page "ONE" is loaded, the icon span text should be displayed right besides the Icon (normal state: display:none;)
When a Page is loaded the sitename is in the body-tag like: 

<body class="site one">

I need to figure out which site or which class is added in the body tag and display the "state" in the navigation.

Pseudo Code: 

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

Can you push me in the right direction? Thank you!

4

3 回答 3

4

使用attribute-equals 选择器 [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();

小提琴

于 2013-10-16T18:16:10.770 回答
0

如果我理解你：

$(document).ready(function() { 

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

 });
于 2013-10-16T18:14:54.410 回答
0

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

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

   $("#navmenu li a[data-filter=" + site + "]").find("span").show();
}
于 2013-10-16T18:18:35.790 回答