動態導航鏈接

我正在研究一個項目，其中有一個包含6個鏈接的水平導航欄，其中3個屬於同一水平欄中的子導航的一部分。鏈接用圖標表示。我正在尋找最簡單的方法來在點擊其中一個主導航圖標時動態更改子導航。動態導航鏈接

[ Home - Search ]{ home1 - home2 - home3 }[ Add ]

選擇搜索時，它改變：

[ Home - Search ]{ search1 - search2 - search3 }[ Add ]

這是目前欄中的HTML。替代圖標的鏈接尚未產生，因爲它目前打破了結構。

<nav id="navBar"> 
    <ul> 
     <div id="mainNav"> 
      <li><a id="activeLink" class="homeLink" href="#">Home<a/></li> 
      <li><a class="searchLink" href=#>Search<a/></li> 
     </div> 
     <div id="subNav"> 
      <li><a class="feedLink" href=#>Feed<a/></li>    
      <li><a class="messagesLink" href=#>Messages<a/></li> 
      <li><a class="connectionsLink" href=#>Connections<a/></li> 
     </div> 
     <div id="mainNav"> 
      <li><a class="addLink" href=#>Add<a/></li> 
     </div> 
    </ul> 
</nav> 
<nav id="searchBar"></nav>

任何幫助，將不勝感激

來源

2012-06-23 anater

你的標記是無效的。 'div's需要超出'ul's。 –

另外，你們沒有一個''結束標籤是正確的。 ''應該是''。 –

謝謝你的評論，我做了這些改變。 – anater

我不知道你需要變得聰明。只要把它們放在一起，並觸發相應.hidden類：

CSS

.hidden { 
    display: none; 
}

HTML

<nav id="navBar"> 
    <ul> 
     <li id="mainNav"> 
      <ul> 
       <li><a id="activeLink" class="homeLink" href="#">Home</a></li> 
       <li><a class="searchLink" href="#">Search</a></li> 
      </ul> 
     </li> 
     <li id="subNav"> 
      <ul> 
       <li><a class="feedLink" href="#">Feed</a></li>    
       <li><a class="messagesLink" href="#">Messages</a></li> 
       <li><a class="connectionsLink" href="#">Connections</a></li> 
      </ul> 
     </li> 
     <li id="searchNav" class="hidden"> 
      <ul> 
       <li><a href="#">Search 1</a></li>    
       <li><a href="#">Search 2</a></li> 
       <li><a href="#">Search 3</a></li> 
      </ul> 
     </li> 
     <li id="mainNav"> 
      <ul> 
       <li><a class="addLink" href="#">Add</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

jQuery的

$(document).ready(function(){ 
    var $subnavs = $('#subNav, #searchNav'), 
     $search = $('#mainNav .searchLink'); 

    $search.click(function(){ 
     $subnavs.toggleClass('hidden'); 

     return false; 
    }); 
});

http://jsfiddle.net/userdude/eJm2z/1

注意，那可怕的醜陋菜單的造型僅僅是用於演示...

來源

2012-06-23 20:56:40

謝謝你的演示，這非常有幫助，我可能最終會使用這種變化。目標是真正能夠從網站上的任何位置訪問搜索的subnav，而無需重新加載頁面。我如何製作它，因此它不是「切換」？例如，點擊homeLink會導致home subnav出現，而不是通過選擇searchLink來打開和關閉搜索subnav。 – anater

您是否在談論一個專門的搜索subnav打開按鈕和一個專用的家庭鏈接subnav打開頂級菜單項？所以如果你多次點擊'Search'，你只能打開'Search' subnav並隱藏'Home'，反之亦然？或者隱藏show上的'Search'導航按鈕，並顯示它的subnav何時隱藏？ –

我的意思是，如果我選擇首頁，它會顯示首頁subnav項目，如果我選擇搜索，它會顯示搜索subnav項目。全部無需轉到新頁面。 – anater

此代碼修改基於傳入的標題一個新的類，新文本responder各個環節：

var responder = function(components) { 
    return function() { 
     $.each($("#subNav a"), function(index, element) { 
      $(element).text(components[index]); 
      $(element).attr("class", components[index]+"Link"); 
     }); 
    } 
}; 
$(".homeLink").click(responder(["home1", "home2", "home3"])) 
$(".searchLink").click(responder(["search1", "search2", "search3"]))

添加了更多選項就像將responder([titles...])附加到click事件一樣簡單;

來源

2012-06-23 20:36:33 matt3141

動態導航鏈接

回答

相關問題