點擊時需要不同結果的標籤菜單

我有以下簡單的html，它有一個標籤菜單和一些javascript來點擊標籤時改變內容。點擊時需要不同結果的標籤菜單

的test.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Menu Test</title> 
    <style type="text/css" media="all">@import "public/stylesheets/master.css";</style> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script> 
    <script><!-- 
     $(document).ready(function() { 
      $('.tablist > li > a').click(function(event){ 
       event.preventDefault();//stop browser to take action for clicked anchor 

     //get displaying tab content jQuery selector 
     var active_tab_selector = $('.tablist > li.active > a').attr('href');      

     //find actived navigation and remove 'active' css 
     var actived_nav = $('.tablist > li.active'); 
     actived_nav.removeClass('active'); 

     //add 'active' css into clicked navigation 
     $(this).parents('li').addClass('active'); 

     //hide displaying tab content 
     $(active_tab_selector).removeClass('active'); 
     $(active_tab_selector).addClass('hide'); 

     //show target tab content 
     var target_tab_selector = $(this).attr('href'); 
     $(target_tab_selector).removeClass('hide'); 
     $(target_tab_selector).addClass('active'); 
    }); 
}); 
    //--></script> 

    </head> 
    <body> 
    <div id="page-container"> 
    <div id="main-nav"> 
     <ul class="tablist"> 
      <li class="active"><a href="#tab1">Tab1</a></li> 
      <li><a href="#tab2">Tab2</a></li> 
      <li><a href="#tab3">Tab3</a></li> 
      <li><a href="/logout">Logout</a></li> 
     </ul> 
    </div> 
    <div id="content"> 
     <section id="tab1" class="tab-content active"> 
      <div> 
       Content for Tab1 
      </div> 
     </section> 
     <section id="tab2" class="tab-content hide"> 
      <div> 
       Content for Tab2 
      </div> 
     </section> 
     <section id="tab3" class="tab-content hide"> 
      <div> 
       Content for Tab3 
      </div> 
     </section> 
    </div> 
    </div> 
    </body> 
</html>

master.css

.tablist { list-style: none; height: 30px; padding: 0; margin: 0; border: none; } 
.tablist li { float:left; margin-right: 3px; } 
.tablist li a { display:block; padding:0 16px; text-decoration:none; border: 1px solid #babdb6; border-bottom:0; font:bold 14px/32px arial,geneva,helvetica,sans-serif; color:#000; background-color:#ccc; 

/*=== CSS 3 elements ===*/ 
webkit-border-top-right-radius: 5px; 
-webkit-border-top-left-radius: 5px; 
-moz-border-radius-topright: 5px; 
-moz-border-radius-topleft: 5px; 
border-top-right-radius: 5px; 
border-top-left-radius: 5px; 
} 

.tablist li a:hover { background:#babdb6; color:#fff; text-decoration:none; } 


.tablist > .active > a, 
.tablist > .active > a:hover { color: #555555; cursor: default; background-color: #ffffff; border: 1px solid #ddd; border-bottom-color: transparent; } 

.tab-content.active{ display: block; } 

.tab-content.hide{ display: none; }

當我在TAB1，TAB2或TAB3點擊我拿到相關的div顯示和其他人被隱藏。我確實需要這個功能，除非有一種更好的方法來根據點擊的標籤包含不同的內容。如果有更好的方法來做到這一點，我會很高興看到，但這可能是一個不同的問題。

我現在問： 我想運行一個不同的行動，如果你當我點擊退出選項卡上。不過，我仍然希望該註銷標籤與其他標籤看起來一樣。有沒有辦法，當我點擊註銷選項卡的URL「/註銷」實際上也帶我註銷頁面（本例中未提供），而不是像其他標籤一樣試圖隱藏潛水？

非常感謝

來源

2016-03-16 AcidHawk

的選擇$('.tablist > li > a')會發現嵌套的「標籤列表」類對象內的所有錨標籤。這包括您的登出標籤<a href="/logout">Logout</a>。這就是您的註銷標籤與其他標籤類似的原因。

有幾種方法可以從該循環中排除註銷選項卡。把我的頭頂部的最簡單的方法是給錨的ID，並使用:not選擇：當你排除選項卡

$('.tablist > li > a').not('#logout')

：

<a id="logout" href="/logout">Logout</a>

你的新的循環選擇是這樣的從那個代碼中，你應該能夠單獨處理它，讓它重定向到你想要的頁面。

來源

2016-03-16 22:59:55

啊啊，我希望我能投票。這很有道理。謝謝。我迫不及待地測試。我假設我可以做類似的事情。 $（'。tabling> li> a'）。not（'#logout'）。click（... – AcidHawk

我喜歡這樣的想法，即完全從點擊函數中排除註銷按鈕，然後編寫自己的處理程序（如@ xCRKxTyPHoon所示），但是，如果您希望仍然使用該點擊功能並希望能夠添加更多的鏈接以相同的方式，而不必爲每個處理器分別編寫處理程序，您可以在點擊功能開始時添加類似內容（檢查href屬性是否具有斜線，如果是，則重定向）：

if($(this).attr('href').indexOf('/') !== -1){ 
    window.location = $(this).attr('href'); 
}

這裏有一支筆在那裏：http://codepen.io/shigidaMark/pen/YqNWRy

來源

2016-03-16 23:08:57

另一個很好的建議，謝謝你的支持......很高興看到它在運行。尚未投票。 – AcidHawk

點擊時需要不同結果的標籤菜單

回答

相關問題