当使用jQuery时，如何在再次点击时显示DIV？

Question

我已经制作了4个隐藏的盒子，页面加载时只显示div（首页）。

当点击文本“box2”时，隐藏其他DIV并显示box2（DIV），点击box3时隐藏其他DIV并显示box3（DIV）......

问题是当box2被显示，并再次点击文本box2时，如何显示第一个盒子（home）？我的意思是再次点击菜单时，如何显示home DIV？

这是演示 http://fiddle.jshell.net/3qepfzvn/11/

这是我的代码：

<div class="m1"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m2"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m3"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>

<div class="m4"><a href="#" class="s1">HOME</a><a href="#" class="s2">box2</a><a href="#" class="s3">box3</a><a href="#" class="s4">box4</a></div>



jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();

    $(".s1").click(function(){ 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
        $(".m1").hide();
        $(".m2").slideDown();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s3").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s4").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 

    });

});


a { color:black; margin:0 5px;}
.m1 {  background:gray; width:400px; height:100px; }
.m2 { background:blue; width:400px; height:400px; }
.m3 { background:yellow; width:400px; height:300px; }
.m4 { background:green; width:400px; height:600px; }

.bold { font-weight:bold; }

- user2881285

---

请问您能否解释一下您具体想要什么？ - Steevan

来自我噩梦的代码 - knitevision

你不觉得使用jQuery UI选项卡会更好吗？ - Andrew

Answer 1

您可以使用以下内容：

jQuery(function(){
$(".m1").show();
$(".m2").hide();
$(".m3").hide();
$(".m4").hide();

var m1Status = true;
var m2Status = false;
var m3Status = false;
var m4Status = false;


$(".s1").click(function(){ 
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();
    $(".s1").addClass("bold"); 
    $(".s2").removeClass("bold"); 
    $(".s3").removeClass("bold"); 
    $(".s4").removeClass("bold"); 
     m1Status = true;
     m2Status = false;
     m3Status = false;
     m4Status = false;

});
$(".s2").click(function(){
    if (!m2Status){
        $(".m1").hide();
        $(".m2").slideDown();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = false;
        m2Status = true;
        m3Status = false;
        m4Status = false;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    }
});
$(".s3").click(function(){
  if (!m3Status){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = false;
        m2Status = false;
        m3Status = true;
        m4Status = false;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    }

});
$(".s4").click(function(){
   if (!m4Status){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 
        m1Status = false;
        m2Status = false;
        m3Status = false;
        m4Status = true;
    }else{
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 
        m1Status = true;
        m2Status = false;
        m3Status = false;
        m4Status = false;
    } 

});
});

- Vahid Vaezinia

Answer 2

var activeDiv = 1;
jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();

    $(".s1").click(function(){
        activeDiv = 1; 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
      if(activeDiv==2)
        {
            activeDiv = 1;
            $(".m1").show();
            $(".m2").hide();
        }  
      else
        {
          activeDiv = 2;
          $(".m1").hide();
          $(".m2").slideDown();
          $(".m3").hide();
          $(".m4").hide();
        }
      ....

- lem2802

Answer 3

使用toggle，你可以使它工作。

html

<table>
 <tr>
    <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding:           5px; width: 150px;">
        <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px; width: 150px;">Div #1</div>
  </td>
  <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
        <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #2</div>
  </td>
  <td>
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px; width: 150px;">
        <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >show this one only</a>
     </div>
     <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px; width: 150px;">Div #3</div>
   </td>
</tr>
</table>

jQuery

With this code you can hide when you click box2 or box3.   

function showonlyone(thechosenone) {
 $('.newboxes').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show(200);
      }
      else {
           $(this).hide(600);
      }
 });
}

- Endrit Shala

Answer 4

jQuery(function(){
    $(".m1").show();
    $(".m2").hide();
    $(".m3").hide();
    $(".m4").hide();
    var homeshow = false;

    $(".s1").click(function(){ 
        $(".m1").show();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").addClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s2").click(function(){
        if(homeshow){
        homeshow = !homeshow;
        $(".m1").hide();
        $(".m2").slideDown();
        }else{
         homeshow = !homeshow;
         $(".m2").hide();
         $(".m1").slide();
        }
        $(".m3").hide();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").addClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s3").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").slideDown();
        $(".m4").hide();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").addClass("bold"); 
        $(".s4").removeClass("bold"); 

    });
    $(".s4").click(function(){
        $(".m1").hide();
        $(".m2").hide();
        $(".m3").hide();
        $(".m4").slideDown();
        $(".s1").removeClass("bold"); 
        $(".s2").removeClass("bold"); 
        $(".s3").removeClass("bold"); 
        $(".s4").addClass("bold"); 

    });

});

- venkatesh thigala

---

你能否添加一些解释，或者让这个更加简洁？ - Jost

Answer 5

我会使用.siblings()和.index()来完成这个任务，如果你要保持相同的模式，它可以通过单个函数调用实现 -

$("div>a").click(function() {
    var $this = $(this),
        index = $this.index(); // first is 0, second is 1 etc

    $("body>div").eq(index).show() // Change to find the correct divs
        .siblings("div").hide();
    $(".s" + (index + 1)).addClass("bold")
        .siblings("a").removeClass("bold");
});

- Rycochet