在 jquery 中再次单击时如何显示 DIV？答案

【问题标题】：How do I show DIV when click again in jquery?在 jquery 中再次单击时如何显示 DIV？
【发布时间】：2015-07-24 14:19:07
【问题描述】：

我做了4个盒子都被隐藏了，页面加载时只显示div(HOME)。

点击文本“box2”时，隐藏其他DIV并显示box2(DIV)，点击box3隐藏其他DIV并显示box3(DIV)......

问题是在显示 box2 并再次单击文本 box2 时，我如何显示第一个 box(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; }

【问题讨论】：

你能解释一下你到底想要什么吗？
我的噩梦中的代码
使用 jQuery ui 标签会不会更好？

标签： javascript jquery html css

【解决方案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;
    } 

});
});

【讨论】：

【解决方案2】：

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"); 

    });

});

【讨论】：

能否请您添加一些解释，和/或使其更简洁一些？

【解决方案3】：

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();
        }
      ....

【讨论】：

【解决方案4】：

通过切换，您可以使其工作

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);
      }
 });
}

【讨论】：

【解决方案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");
});

【讨论】：