javascript - 在 jquery 中再次单击时如何显示 DIV？

Question

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

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

问题是当显示 box2 并再次单击文本 box2 时，我如何显示第一个框(主页)？我的意思是当再次点击菜单时，如何显示到首页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; }

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

});
});