jQuery切換是不允許

Question

我正在基於三個鏈接的菜單切換三個div。

它的工作很好，除了我想避免沒有div顯示。換句話說，應該總是顯示一個div。現在，如果你點擊一個菜單項兩次，div完全消失。

的jsfiddle：http://jsfiddle.net/sf23103/raervcLj/5/

HTML：

<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 

<div id="directory_default" style="">Default Content goes here.....</div> 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div> 

JQUERY：

$(document).ready(function() { 
    $('.menu').click(function() { 
     var $clicked = $(this) 
     $('.menu').each(function(){ 
      var $menu = $(this); 
      if (!$menu.is($clicked)) 
      { 
       $($menu.attr('data-item')).hide(); 
      } 
     }); 
     $($clicked.attr('data-item')).toggle(); 
    }); 
}); 

Answer 1

當前，您隱藏了所有未點擊的內容，然後切換點擊的內容。所以如果被點擊的那個已經顯示，切換它將會隱藏它。

更換

if (!$menu.is($clicked)) 
{ 
    $($menu.attr('data-item')).hide(); 
} 

隨着

$($menu.attr('data-item')).hide(); 

這樣，您將隱藏一切，然後總是會切換隻被點擊的一個。

Answer 2

我會降低你的代碼只是

$('.menu').click(function() { 
 
    $('[id^="directory_"]').hide() 
 
    $($(this).data('item')).show(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="menu1" class="menu" data-item="#directory_default">Default</a> | 
 
<a id="menu2" class="menu" data-item="#directory_alpha_first_name">First Name</a> | 
 
<a id="menu3" class="menu" data-item="#directory_alpha_last_name">Last Name</a> 
 

 
<div id="directory_default" style="">Default Content goes here.....</div> 
 
<div id="directory_alpha_first_name" style="display: none;">First Name content goes here....</div> 
 
<div id="directory_alpha_last_name" style="display: none;">last name content goes here....</div>

點擊一下，隱藏所有以directory_開頭的div，然後根據data屬性顯示具有相應ID的ID。