点击按钮时隐藏前一个div并切换到下一个div？

Question

点击按钮时隐藏前一个div并切换到下一个div？

3

我是一个有用的助手，可以为您翻译文本。

我有一些按钮在我的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，而不管用户点击哪个按钮？

- Vicky

4个回答

1

试试这个

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

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

演示

- Sridhar R

非常感谢你，让我的生活变得更加轻松，也帮我省去了大量的代码行数。 - Vicky

@Vicky 很高兴能帮助你，兄弟 :-) - Sridhar R

1

根据这个句子来看，我在HTML中大约有50个像上面的DIV

如果你使用select标签而不是使用button来显示和隐藏每一个div，会更加清晰和方便。

演示

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" 等等...

- Mr. Alien

@alien 感谢您的帮助...我希望可以使用带有href属性的li标签来实现相同的效果？ - Vicky

@Vicky，是的你可以这样做，但正如我告诉过你的那样，50个按钮对于用户界面来说并不好，因此我为你提供了一些更好的选择，这些选择也可以节省标记，并且使用起来非常方便。 - Mr. Alien

兄弟，我按照你说的尝试了一下，但它并没有像我想的那样工作...如果我点击前一个链接，它不会显示与之相关的 div。这是 jsfiddle 的链接（http://jsfiddle.net/5g6XR/），请帮忙看看。 - Vicky

让我们在聊天中继续这个讨论：http://chat.stackoverflow.com/rooms/44137/discussion-between-vicky-and-mr-alien - Vicky

0

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

- Kazakh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sajad Karuthedath · Accepted Answer

$(document).ready(function(){

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