Jquery - 在導航中查找屬性

代碼：

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

你可以把我在正確的方向？謝謝！

來源

2013-10-16 Marek123

使用attribute-equals selector[data-filter=one]找到匹配標籤：

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

來源

2013-10-16 18:16:10 McGarnagle

如果我理解你：

$(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-16 18:14:54 BTC

你也可以連接在$（「＃navmenu」）命令組合在一起，像這樣：$（「＃navmenu」）顯示（）兒童（「李：首個類型」）。addClass（「活動」） ; – BTC

老實說有很多方法可以做到這一點...我在評論中寫到的那個可能更接近它... – BTC

好方法，但有更多的「班」而不僅僅是一個。所以我必須編寫更多的「if」，或者？ – Marek123

好，因此與您的僞代碼：

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-16 18:18:35

如果我將網站添加或重命名爲「網站國美」或「網站博客」，會更容易嗎？問題是，body-tag上的類比「site」更多。 – Marek123

Jquery - 在導航中查找屬性

回答

相關問題