jQuery隱藏和顯示部門

Question

您好所有在StackOverflow，在過去幾天我有我的網站的一些問題，並有一個非常舒適的點，它在哪裏。我現在的jQuery腳本是：

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function() { 
     $("div#white").toggle(); 
    }); 

    $("#secondpagename, #secondpagename2").click(function() { 
     $("div#v2black").toggle(); 
    }); 

    $("#thirdpagename, #thirdpagename2").click(function() { 
     $("div#v3black").toggle(); 
    }); 
}); 

我知道這可能不是最乾淨，最好的方法，但它的工作原理，並曾我過去5幾天就要瘋了，因爲我只有現在開始使用jQuery的一週。

什麼我想現在要做的就是讓div的白色，v2black和v3black打開;當它打開時，它會關閉其他可能同時打開的div（見上）。

這裏是我的HTML櫃面它是需要以供參考：

<div class="altstevenav" style="display:none"> 
    <div class="stevenav"> 
     <ul class="navigation"> 
      <li> 
       <a href="#firstpagename" id="firstpagename">Steve A</a> 
      </li> 
      <li> 
       <a href="#secondpagename" id="secondpagename">Tattoos</a> 
      </li> 
      <li> 
       <a href="#thirdpagename" id="thirdpagename">Sketchbook</a> 
      </li> 
     </ul> 
    </div> 
</div> 
</div> 
<!--MAIN CLOSING DIV--> 
</div> 
<!--CONTENT CLOSING DIV--> 
    <div class="stevenav"> 
     <ul class="navigation"> 
      <li> 
       <a href="#firstpagename" id="firstpagename2">Steve A</a> 
      </li> 
      <li> 
       <a href="#secondpagename" id="secondpagename2">Tattoos</a> 
      </li> 
      <li> 
       <a href="#thirdpagename" id="thirdpagename2">Sketchbook</a> 
      </li> 
     </ul> 
    </div> 

<!--ALL DIVS ARE CLOSE HERE--> 
<!--Divisional Panels--> 
<div id="white"> 
<div style="width:968px; margin: 0 auto;"> 
<div class="panel" style="color:#000000;"> 
<div style="width:450px; float:left;"> 
<img src="<?php echo the_field('image_one_of_biography'); ?>" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="<?php echo the_field('image_two_of_biography'); ?>" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="<?php echo the_field('image_three_of_biography'); ?>" width="425" alt="Biography Image" /> 
</div> 
<div style="width:450px; float:left; text-align:left;"> 
<?php echo the_field('biography_content'); ?> 
</div> 
</div> 
</div> 
</div> 
<div id="v2black"> 
<div style="width:968px; height:1000px; margin: 0 auto;"> 

</div> 
</div> 

<div id="v3black"> 
<div style="width:968px; height:1000px; margin: 0 auto;"> 

</div> 
</div> 

我想認爲這是非常簡單的，但只是想一點點，我應該如何去這個方向..

我在堅果殼問題：在同一時間只有一分格開出的白色，v2black和v3black。

Answer 1

你可以指定一個普通類，並強迫他們全封閉上點擊然後重新打開一個你想要的......

jQuery(document).ready(function() { 
    $("#firstpagename, #firstpagename2").click(function() { 
     $('.common').hide(); 
     $("div#white").toggle(); 
    }); 

    $("#secondpagename, #secondpagename2").click(function() { 
     $('.common').hide(); 
     $("div#v2black").toggle(); 
    }); 

    $("#thirdpagename, #thirdpagename2").click(function() { 
     $('.common').hide(); 
     $("div#v3black").toggle(); 
    }); 
}); 

然後添加類HT​​ML ...

<div id="white" class="common"> 
</div> 
<div id="v2black" class="common"> 
</div> 
<div id="v3black" class="common"> 
</div> 

Answer 2

它看起來像你可能想看看一個jQuery hide和show，而不是使用切換。

Answer 3

更改第一個：

$("#firstpagename, #firstpagename2").click(function() { 
    $("#white").show(); 
    $("#v2black, #v3white").hide(); 
}); 

然後重複別人。

Answer 4

如果你給你想切換類的元素（如「可切換」），它應該工作很容易：

$(".toggleable").click(function(){ 
     $(".toggleable").hide(); //Hide all elements with the class toggleable. 
     $(this).toggle(); //Show the element that the user clicked on. 
});