Javascript 是否隐藏上一个div并在单击按钮时切换下一个div？_Javascript_Jquery_Css_Html

Javascript 是否隐藏上一个div并在单击按钮时切换下一个div？

javascript jquery css html

Javascript 是否隐藏上一个div并在单击按钮时切换下一个div？,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我的html中有许多按钮。每个按钮都指向一个特定的DIV。我想用一种简单的方法在单击另一个按钮时隐藏以前打开的DIV。到目前为止，我已经用jquery编写了一段代码，但我有一种奇怪的感觉，我正在将大量代码放入一个简单可实现的任务中。有没有比我尝试完成的更简单的方法以下是我迄今为止所做的工作我的HTML： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

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

我的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，不管用户单击哪个按钮？

试试这个

$(document).ready(function(){

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

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

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

按照这句话，我的html中大约有50个DIV，就像上面的一样

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

HTML

CSS

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

非常感谢。。。你让我的生活更轻松。。。而且救了我一命…@Vicky很高兴能帮你兄弟：-@SajadLfc它工作正常但问题是所有的开关都是从上到下的。。。它滑下来了，我是说。。。。但是我的切换应该从左上角开始，并填满屏幕谢谢你的回复…@alien谢谢你的帮助。。。。我希望使用li with href attribute也能达到同样的效果？@Vicky是的，你可以，但正如我告诉你的，50个按钮对于UI来说并不好，所以我给你提供了一些更好的东西，这也会为你节省一些标记，而且这是一种很好的goBro方法。我试过你说的，但它并没有像我希望的那样工作。。。如果我点击上一个链接，它不会显示与之相关的div，这里是小提琴，请帮助我们

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

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

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

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

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

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