Javascript left and top nav active current states

Question

需要js幫助解決這個問題。一頁上有兩個導航欄，一個側面導航欄和一個頂部導航欄一起工作。單擊並選擇側導航激活狀態和導航頂部當前狀態時會突出顯示，但當單擊第二個和第三個導航鏈接時，側導航激活/選定狀態將被刪除。

下面是HTML：

<div id="nav"> 
<ul> 
    <li class="active"><a href="#SideNav1">Side Nav 1</a></li> 
    <li><a href="#SideNav2">Side Nav 2</a></li> 
</ul><br /> 

<div id="SideNav1"> 
    <ul> 
     <li class="current">Side Nav 1 Top Nav 1</li> 
     <p>Content here</p> <br />      
     <li><a href="#SideNav1TopNav2">Side Nav 1 Top Nav 2</a></li> 
     <p>Content here</p> <br />    
     <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li> 
     <p>Content here</p> <br />    
    </ul>  
</div> 

    <div id="SideNav2"> 
    <ul> 
     <li class="current">Side Nav 2 Top Nav 2</li> 
     <p>Content here</p> <br />     
     <li><a href="#SideNav2TopNav2">Side Nav 2 Top Nav 2</a></li> 
     <p>Content here</p> <br />    
     <li><a href="#SideNav3TopNav3">Side Nav 2 Top Nav 3</a></li> 
     <p>Content here</p> <br />    
    </ul>  
</div> 

    <div id="SideNav1TopNav2"> 
    <ul> 
     <li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li> 
     <p>Content here</p> <br />     
     <li class="current">Side Nav 1 Top Nav 2</li> 
     <p>Content here</p> <br />    
     <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 3</a></li> 
     <p>Content here</p> <br />    
    </ul>  
</div> 

    <div id="SideNav1TopNav3"> 
    <ul> 
     <li><a href="#SideNav1">Side Nav 1 Top Nav 1</a></li> 
     <p>Content here</p> <br />     
     <li><a href="#SideNav1TopNav3">Side Nav 1 Top Nav 2</a></li> 
     <p>Content here</p> <br />    
     <li class="current">Side Nav 1 Top Nav 3</li> 
     <p>Content here</p> <br />    
    </ul>  
</div> 

    <div id="SideNav2TopNav2"> 
    <ul> 
     <li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li> 
     <p>Content here</p> <br />     
     <li class="current">Side Nav 2 Top Nav 2</li> 
     <p>Content here</p> <br />    
     <li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 3</a></li> 
     <p>Content here</p> <br />    
    </ul>  
</div> 

    <div id="SideNav2TopNav3"> 
    <ul> 
     <li><a href="#SideNav2">Side Nav 2 Top Nav 1</a></li> 
     <p>Content here</p> <br />     
     <li><a href="#SideNav2TopNav3">Side Nav 2 Top Nav 2</a></li> 
     <p>Content here</p> <br />    
     <li class="current">Side Nav 2 Top Nav 3</li> 
     <p>Content here</p>  <br />    
    </ul>  
</div> 

</div> 

這裏是JS：

$(function() { 
$('#nav div').hide(); 
$('#nav div:first').show(); 
$('#nav ul li:first').addClass('active'); 
$('#nav ul li a').click(function(){ 
    var currentTab = $(this).attr('href'); 
    var vis = $(currentTab).is(':visible'); 
    $('#nav div').hide(); 
    $('#nav ul li').removeClass('active'); 
    $(this).parent().addClass('active'); 
    if(vis) { 
     $(currentTab).hide(); 
    } else { 
     $(currentTab).show(); 
    } 
}); 
}); 

而CSS：

.active { 
    background:#008CDC; 
} 
.current { 
     background:#ECEDED; 
} 

動態代碼在這裏：

http://jsfiddle.net/tqhHA/79/

Answer 1

這是一個例子，其中描述的要求會有很多成果。出於某種原因，Stack Overflow社區（以及那些遵循JavaScript標籤的社區）喜歡一個好的「隱藏我，展示我」的問題。 ;-)據我所知道的，要求是這些：

1. A面導航應當確定哪些內容出現在主區域
2. 各主要區域應包含自己的子導航
3. 主動方導航應以不同的樣式來指定，並可以通過標記
4. 活動子導航應由不同的風格來顯示，並可以通過標記來預選預選
5. ，我沒有深入到我的回答可以很容易地附加要求：導航和子導航狀態應被存儲（例如，使用cookie，本地存儲API或會話變量）以便在返回頁面時進行檢索。

就我個人而言，我覺得如果「標籤」是你想要爲你稱之爲「頂部導航」而後來稱爲「Subnav」的方式，那麼你可以輕鬆地使用jQuery UI。我的例子不使用jQuery UI。

---

（這裏有以下樣本小提琴：http://jsfiddle.net/tqhHA/85/）

需要注意你的原始代碼的第一件事是，它缺乏一個合理的標記結構。編號爲SideNav1的div與SideNav1TopNav2處於同一水平。這只是沒有意義。然後在nav有兩個項目SEEM喜歡他們應該是你的側面導航，但不匹配的名稱。在「內容」區域中，當前標籤具有「當前」類（很棒！），但沒有自己的錨鏈接來切換內容（哎呀！）。

不僅如此，它是無效的標記（你不能讓你的<p>元素穿插在<li>元素中。

讓我們清理這一切都取決於在以下幾個方面：

1. 將有（類似原始的nav列表）
2. 「內容區」將僅由一個「內容」填充一個主導航div在任何給定的時間。
3. Subnav將遵循與描述應該可見內容的主導航鏈接相同的模式。它只是一樣的東西，嵌套更深一層。將「內容」區域看作是頁面本身的較小版本。
4. 只需在提供的示例代碼的條款，內容本身，就會發現什麼都要相互作用過程中發生

的HTML：

<ul id="nav"> 
    <li><a href="#content1">Item 1</a></li> 
    <li class="active"><a href="#content2">Item 2</a></li> 
</ul> 

<div id="content1" class="content"> 
    <ul> 
    <li class="active"><a href="#tab1_1">Subnav 1</a></li>    
    <li><a href="#tab1_2">Subnav 2</a></li>    
    <li><a href="#tab1_3">Subnav 3</a></li>   
    </ul> 
    <div id="tab1_1"> 
    <p>This content should only be visible when Item 1 is selected from the 
     main nav, and Subnav 1 is selected in the content area.</p> 
    </div> 
    <div id="tab1_2"> 
    <p>This content should only be visible when Item 1 is selected from the 
     main nav, and Subnav 2 is selected in the content area. This <a href="#">fake anchor</a> 
     shows that you can add anchors inside the tabs.</p> 
    </div> 
    <div id="tab1_3"> 
    <p>This content should only be visible when Item 1 is selected from the 
     main nav, and Subnav 3 is selected in the content area.</p> 
    </div> 
</div> 

<div id="content2" class="content"> 
    <ul> 
    <li><a href="#tab2_1">Subnav 1</a></li>    
    <li><a href="#tab2_2">Subnav 2</a></li>    
    <li class="active"><a href="#tab2_3">Subnav 3</a></li>   
    </ul> 
    <div id="tab2_1"> 
    <p>This content should only be visible when Item 2 is selected from the 
     main nav, and Subnav 1 is selected in the content area.</p> 
    </div> 
    <div id="tab2_2"> 
    <p>This content should only be visible when Item 2 is selected from the 
     main nav, and Subnav 2 is selected in the content area.</p> 
    </div> 
    <div id="tab2_3"> 
    <p>This content should only be visible when Item 2 is selected from the 
     main nav, and Subnav 3 is selected in the content area.</p> 
    </div> 
</div> 

的CSS修改爲好：

1. 如果我們要談論側面和頂部導航，讓我們把它放在側面和頂部。我們不會要求有幫助的SO成員通過案文解決問題。
2. 對於這兩種類型的導航，您可以使用相同的類（active）。所有你需要做的，不同的他們的風格是具體

.active { background:navy; } 
    .active a { color: white } 

.content .active { background:yellow; } 
    .content .active a { color: black; } 

/* we're demoing sidebars... let's make it a SIDE bar! */ 
#nav, .content { float: left } 
#nav { width: 100px; } 
.content { width: 300px; margin-left: 24px;} 

/* make the Subnav horizontal... more "tab"-like! */ 
.content li { display: inline-block } 

好了，現在我們有一個適當的文件。這是事情...所有上述可能甚至不是最好的方法。爲了便於導航，我有很多身份證警報響起。我把它們留在了原來的位置，因爲它與你的方法非常吻合，但它甚至不像模塊化那樣。無論如何，只要承認記錄它不一定是理想的，但它會起作用。

JS也是全新的。重要的是，如果我們已經有適當的HTML結構，那麼編寫JS很容易！內嵌批註，已經提供了足夠的資料我想，讓我們的正事了：

var updateMain = function() { 

    // just hide ALL content areas first, rather than micro-managing 
    $('.content, .content div').hide(); 

    // with all hidden, reveal only the content areas that have become active 
    var activeLinks = $('.active a'); 
    activeLinks.each(function() { 
     var activeArea = $(this).attr('href'); 
     $(activeArea).show(); 
    }); 

}; 

$(document).ready(function() { 
    updateMain(); 

    // Bind a click event to the all navigation items (both main and sub) 
    $('#nav a, .content > ul a').on('click', function(event) { 

     event.preventDefault(); // prevent default anchor behaviour 

     var $parent = $(this).parent(); // jQ object of the list item containing the anchor clicked 

     // only do stuff if user has not just clicked a nav that's already active 
     if (!($parent.hasClass('active'))) { 
      $parent.siblings().removeClass('active'); 
      $parent.addClass('active'); 
     } 

     updateMain(); // with new active classes in place, show the correct content 
    }); 
});​ 

底線是：我們正在做的是在頁面加載，然後在每次點擊後，我們會顯示內容與「主動」導航相關。所有點擊都是「活動」的改變，然後運行內容更新功能。

---

免責聲明：

• 在這裏使用時，你可能會得到 「無樣式內容的閃光」（FOUC），因爲它是JavaScript的執行隱藏技術。讓JavaScript處理它更好的可訪問性和搜索引擎優化。但是你可以研究破壞FOUC的技術。我沒有在這裏進入。

• 希望你會看到如何構建內容和捕獲事件。然後你可以找到改進的機會！顯示/隱藏相關內容的一種流行方式是再次以不同的方式構造它，以便每個鏈接都在內容之前，例如，您可以執行一個$(this).next().show()。有幾十種方法來撫平這隻貓。