2

ナビゲーションがあります (自作の 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 タグに含まれます。 

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

私を正しい方向に押してくれますか？ありがとうございました！

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

まあ、それに応じてあなたの疑似コードで：

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 に答える
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 に答える