Question

大家好我想做的是我的html中有多个按钮。每个按钮指的是特定的DIV。我想要的是一个简单的方法来隐藏以前打开的DIV时单击另一个按钮。到目前为止，我已经在JQUERY中编写了代码。但我有一种奇怪的感觉，就是将大量代码放入一个简单可行的任务中。有没有比我试图完成的更简单的方法呢？

这是我到目前为止所做的事情

我的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>

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

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

我的html中有大约50个DIV，就像上面那样。我认为使用上面的JQUERY浪费了编码线。我知道会有更好的方法来做到这一点。我的代码似乎运行良好，但是无论用户点击哪个按钮，JQUERY中都有任何方法可以隐藏以前的DIV。

JQUERY的新手可以提供任何帮助。谢谢你提前....

Answer 1

$(document).ready(function(){

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

Answer 2

试试这个

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

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

DEMO

Answer 3

使用这句话我的html中有大约50个DIV，就像上面那些

如果您使用select代码，而不是使用button来展示和隐藏每个div

，这将更加干净和方便

Demo

<强> 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

$('#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

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

如果您想避免使用ID，您还可以创建自定义属性，例如data-show="1"和data-show="2"等等......

Answer 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>

隐藏上一个div并点击按钮切换下一个div？

4 个答案: