Question

我有4个Div容器我想要4个按钮

当页面打开时，所有DIV都被隐藏当用户单击按钮时，将打开特定的DIV。当单击另一个按钮时，原始DIV关闭，与该按钮对应的那个按钮打开，依此类推

我在帖子中搜索过，但没有找到这样的内容。我试图修改一些，但没有运气。

有人指出我的方向吗？想在jQuery或JS中做到这一点

先谢谢

Answer 1

这就是我正在尝试的...它的工作方式，但因为有4个DIV，我认为它变得混乱。

    jQuery(document).ready(function ($) {

$("a").click(function(){
    //alert("dfgfdg");
   var myelement = $(this).attr("href")
    $(myelement).slideToggle("slow");
    $(".toggle:visible").not(myelement).hide();
  });

};


<div>
    <h3 class = "trigger"><a href="#slider1_container"> slider 1</a></h3>
    <h3 class = "trigger"><a href="#slider2_container"> slider 2</a></h3>
    <h3 class = "trigger"><a href="#slider3_container"> slider 3</a></h3>
    <h3 class = "trigger"><a href="#slider4_container"> slider 4</a></h3>
</div>



<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;  ">
</div>
<div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;  ">
</div>
<div id="slider3_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;  ">
</div>
<div id="slider4_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px; overflow: hidden;  ">
</div>

Answer 2

试试这个：

   $(document).ready(function(){

   $("a").each(function(){
       var $this = $(this);
       $(this).click(function(){
        //alert("dfgfdg");
        $($this.attr('href')).show();
        $('div').not($this.attr('href')).hide();
      });
   });

工作小提琴：JSFiddle

编辑：

我不知道你现在想要实现什么目标。我想你想要你的div的内容是可见的，所以试试这个：

$($this.attr('href')).children().show():

Answer 3

我可以让它工作，但必须这样做....我知道有一种更简单的方式......任何人？

$(document).ready(function(){

$("a").each(function(){

   var $this = $(this);
   $(this).click(function(){

        $($this.attr('href')).show();
        //$($this.attr('href')).children().show():

        var href = ($this).attr('href');
        alert(href);

        //$('div').not($this.attr('href')).hide();

        if(href == "#slider1_container") {
                    $( "#slider2_container" ).hide();           
                    $( "#slider3_container" ).hide();           
                    $( "#slider4_container" ).hide();
        }
        else if(href == "#slider2_container") {     
                    $( "#slider1_container" ).hide();
                    $( "#slider3_container" ).hide();           
                    $( "#slider4_container" ).hide();
        }
        else if(href == "#slider3_container") {     
                    $( "#slider1_container" ).hide();
                    $( "#slider2_container" ).hide();                   
                    $( "#slider4_container" ).hide();
        }
        else if(href == "#slider4_container") {         
                    $( "#slider1_container" ).hide();
                    $( "#slider2_container" ).hide();           
                    $( "#slider3_container" ).hide();           
        }
        else {
            $alert("broke");
        }               


      });
   });

});

jQuery使用多个按钮隐藏和显示多个Div

3 个答案: