如何使用jquery创建显示/隐藏切换按钮_Jquery_Html_Button_Hide_Show

如何使用jquery创建显示/隐藏切换按钮

jquery html button

如何使用jquery创建显示/隐藏切换按钮,jquery,html,button,hide,show,Jquery,Html,Button,Hide,Show,您好，我一直在尝试用jquery制作一个显示/隐藏切换按钮，但我只能找到显示div的按钮，而找不到隐藏div的按钮下面是我发现的一个示例，它显示了一个div，但它不允许您隐藏它，除非您单击另一个按钮。我希望能够使用相同的按钮来显示和隐藏一个div。我的页面上有多个div，并且希望能够使用jquery而不是javascript <html> <head> <script src="http://code.jquery.com/jquery-latest.js"&g

您好，我一直在尝试用jquery制作一个显示/隐藏切换按钮，但我只能找到显示div的按钮，而找不到隐藏div的按钮

下面是我发现的一个示例，它显示了一个div，但它不允许您隐藏它，除非您单击另一个按钮。我希望能够使用相同的按钮来显示和隐藏一个div。我的页面上有多个div，并且希望能够使用jquery而不是javascript

<html>
 <head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    $(document).ready(function(){

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

      });
</script> 
     </head>
        <body>


 <div id="buttonsDiv"> 

  <input type="button" id="button1" class="buttons" value="div1"></input>
  <input type="button" id="button2" class="buttons" value="div2"></input>
  <input type="button" id="button3" class="buttons" value="div3"></input>
  <input type="button" id="button4" class="buttons" value="div4"></input>

  </div>

   <div>

     <div id="div1" style="display:none">
    Hello World
     </div>

     <div id="div2" style="display:none">
       Test
   </div>

        <div id="div3" style="display:none">
          Another Test
  </div>

     <div id="div4" style="display:none">
     Final Test
     </div>


         </div>


     </body>
    </html>


$（文档）.ready（函数（）{
$（“.buttons”）。单击（函数（）{
var divname=this.value；
$（“#”+divname）.show（“slow”）.sides（）.hide（“slow”）；
});
});
你好，世界
试验
另一个测试
最终测试

这是一个非常简单的脚本：

$('.buttons').click(function()
{
    var elementToShowOrHide = $('#' + $(this).val());

    if(elementToShowOrHide.is(':visible'))
       elementToShowOrHide.hide();
    else
       elementToShowOrHide.show();
});

然后，每次单击按钮都会切换其他元素的可见性

使用以下命令切换脚本：

<script>
    $(document).ready(function(){
        $(".buttons").click(function () {
           $("#buttonsDiv div").hide()
          var divname= this.value;
          $("#"+divname).show();
        });
    });
</script>


$（文档）.ready（函数（）{
$（“.buttons”）。单击（函数（）{
$（“#按钮div”）.hide（）
var divname=this.value；
$（“#”+divname）.show（）；
});
});

更简单的方法是使用控件自己的切换功能

$('.toggleButtons').click(function()
{
    $('control1, control2, ...').toggle();
});

jQuery.toggle（）方法应该可以帮助您：

$(".buttons").click(function () {
  var divname= this.value;
  $("#"+divname).toggle();
});

来源：

试试这个

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

可以使用

切换

方法显示和隐藏元素。这将分别显示/隐藏每个div：

$(".buttons").click(function () {
  $("#" + this.value).toggle("slow");
});

应该这样做

编辑：

切换的功劳归于@AtoMerZ。他首先得到了它。

假设您希望在显示新的

div时隐藏所有其他div
s：
$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

.
jQuery是javascript！我在上编写了教程，toggle（）不应该应用于$（this），而是应用于与单击的按钮相关的div。什么是$（“#buttonsDiv”）。child（）将给出？我是否必须为每个按钮使用一个toggle方法？由于要控制的div名称会因每个按钮的不同而不同是的，我想是的，但是如果您希望多个区域由单个按钮隐藏/显示，然后用逗号分隔，代码会更新。谢谢，这正是我所需要的。
$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });