隐藏先前的div并在单击按钮时切换next div ?

Hi guys what i am trying to do is i have number of buttons in my html . Each button referring to a particular DIV . What i want is an easy way to hide the previously open DIV when another button is clicked . So far i have written a code in JQUERY . But i have a strange feeling that am putting in a lot of code into a simply achievable task. Is there a simpler way to do this than what i have tried to accomplish ?

大家好，我要做的是在html中有很多按钮。每个按钮都指向一个特定的DIV。我想要的是在单击另一个按钮时隐藏先前打开的DIV的简单方法。到目前为止，我已经用JQUERY编写了一段代码。但是我有一种奇怪的感觉，那就是在一个简单的可实现的任务中加入了大量的代码。有没有比我想要完成的更简单的方法呢?

Here is what i have done so far

这是我迄今为止所做的。

My HTML

我的HTML

 <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>TODO supply a title</title>
            <meta name="viewport" content="width=device-width"/>   
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>                      
        </head>
        <body>
            <div id="body">
            <input type="button" name="division1" value="div1" class="buttons" id="button1"/>
            <input type="button" name="division2" value="div2" class="buttons" id="button2"/>
            <input type="button" name="division3" value="div3" class="buttons" id="button3"/>
            <input type="button" name="division4" value="div4" class="buttons" id="button4"/>
            <input type="button" name="division5" value="div5" class="buttons" id="button5"/>
            <input type="button" name="division6" value="div6" class="buttons" id="button6"/>
            <div id="div1" class="divs"></div>
            <div id="div2" class="divs"></div>
            <div id="div3" class="divs"></div>
            <div id="div4" class="divs"></div>
            <div id="div5" class="divs"></div>
            <div id="div6" class="divs"></div>
            </div>
        </body>
    </html>

My CSS

我的CSS

            #body{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;    
                background-color: #000;
            }
            .buttons{
                width: 10%;
                height: 5%;
                position: relative;
                left: 10%;
                cursor: pointer;
                z-index: 500;
            }
            .divs{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                display: none;
            }
            #div1{
                background-color: #377D9F;
            }
            #div2{
                background-color: #02B0E6;
            }
            #div3{
                background-color: #4b9500;
            }
            #div4{
                background-color: #aaa;
            }
            #div5{
                background-color:#aa0000;
            }
            #div6{
                background-color: aquamarine;
            }

My Jquery

我的Jquery

        $(document).ready(function () {       
        $("#button1").click(function () {
              $('#div1').toggle(100);
                  $("#div2,#div3,#div4,#div5,#div6").hide();               
        });          
         $("#button2").click(function () {
            $("#div2").toggle(100);
            $("#div1,#div3,#div4,#div5,#div6").hide();    
        });
         $("#button3").click(function () {
            $("#div3").toggle(100);
            $("#div1,#div2,#div4,#div5,#div6").hide();    
        });
         $("#button4").click(function () {
            $("#div4").toggle(100);
            $("#div1,#div2,#div3,#div5,#div6").hide();    
        });
         $("#button5").click(function () {
            $("#div5").toggle(100);
            $("#div1,#div2,#div3,#div4,#div6").hide();    
        });
         $("#button6").click(function () {
            $("#div6").toggle(100);
            $("#div1,#div2,#div3,#div4,#div5").hide();    
        });
    });

I kind of have around 50 DIV's in my html like the above ones . And i think using the above JQUERY is waste of coding lines . I know there will be a better way to do this. My code seems to work well but is there any way in JQUERY to just hide the previous DIV no matter which button user clicks.

我的html中有大约50个DIV。我认为使用上面的JQUERY是在浪费代码行。我知道会有更好的办法。我的代码似乎运行得很好，但是在JQUERY中是否有办法只隐藏前一个DIV，不管用户单击哪个按钮。

Am new to JQUERY can any one help .Thanks in Advance....

我新的JQUERY可以任何一个帮助提前谢谢....

4 个解决方案

#1

Going with this sentence I kind of have around 50 DIV's in my html like the above ones

按照这个句子，我的html中大概有50个DIV像上面这些

This would be a lot more clean as well as convenient if you use a select tag, instead of using button to show and hide each div

如果您使用一个select标记，而不是使用按钮来显示和隐藏每个div，那么这将更加干净和方便

Demo

演示

HTML

HTML

<select id="show_divs">
    <option>Select to show a div</option>
    <option value="1">Show 1</option>
    <option value="2">Show 1</option>
</select>

<div class="parent">
    <div id="show1">This is the first div</div>
    <div id="show2">This is the second div</div>
</div>

jQuery

jQuery

$('#show_divs').change(function() { //onChange execute the function
    var showDiv = $(this).val(); //Store the value in the variable
    $('div.parent > div').hide(); //Hide all the div nested inside .parent
    $('#show' + showDiv ).show(); //Fetch the value of option tag, concatenate it with the id and show the relevant div
});

CSS

CSS

div.parent > div {
    display: none; /* Hide initially */
}

If you want to avoid using id's, you can also create your custom attribute, like data-show="1" and data-show="2" so on...

如果想避免使用id，还可以创建自定义属性，比如data-show="1"和data-show="2"等等……

#2

$(document).ready(function(){

$(".buttons").click(function () {
            var divname= this.value;
              $("#"+divname).slideToggle().siblings('.divs').hide("slow");
            });
 });

#3

Try this

试试这个

$(document).ready(function() {
    $(".divs").hide();

    $(".buttons").click(function() {
        $(".divs").hide().eq($(this).index()).show();
    });
});

DEMO

演示

#4

<input type="button"  value="div1" class="buttons" id="button1" />
<input type="button"  value="div2" class="buttons" id="button2" />
<input type="button"  value="div3" class="buttons" id="button3" />
<input type="button"  value="div4" class="buttons" id="button4" />
<input type="button"  value="div5" class="buttons" id="button5" />
<input type="button"  value="div6" class="buttons" id="button6" />
<div id="div1" class="divs">div1</div>
<div id="div2" class="divs">div2</div>
<div id="div3" class="divs">div3</div>
<div id="div4" class="divs">div4</div>
<div id="div5" class="divs">div5</div>
<div id="div6" class="divs">div6</div>
<script language="javascript">
$(document).ready(function () {
    $(".buttons").click(function () {
    $('.divs').hide();
    $('#div'+$(this).attr('id').replace('button','')).toggle(100);
      })

  })
</script>

#1