Question

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

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

问题是当显示box2并再次单击文本框2时，如何显示第一个框（主页）？我的意思是再次点击菜单，如何显示到家DIV？

这是Demo 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;
    } 

});
});

Answer 2

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

<强> HTML

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

<强> jquery的

{{1}}

Answer 3

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

    });

});

Answer 4

＆＃13;

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

＆＃13;

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

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

5 个答案: