如何使用 jquery 制作显示/隐藏切换按钮

发布于 2024-11-29 21:03:38 字数 1382 浏览 1 评论 0原文

您好，我一直在尝试使用 jquery 制作一个显示/隐藏切换按钮，但我只能找到显示 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>

原文

Hi I have been trying to make a show/hide toggle button with jquery but I can only find buttons that show a div but none that hide it

below is one of the examples I found that shows a div but it doesn't let you hide it unless you click on another button. I would like to be able to use the same button to show and hide a div. I have multiple divs on my page and would like to be able to use jquery instead of 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

烟─花易冷 2024-12-06 21:03:38

试试这个

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

Try this

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

回复收藏 0 原文

我不咬妳我踢妳 2024-12-06 21:03:38

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

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

Even simpler use control's own toggle function.

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

回复收藏 0 原文

妄司 2024-12-06 21:03:38

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

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

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

每次单击按钮都会切换另一个元素的可见性。

That's a pretty simple script to make:

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

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

Each click on the button would then toggle the visibility of the other element.

回复收藏 0 原文

暮凉 2024-12-06 21:03:38

演示

$(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

应该可以了。

编辑：

切换的功劳归@AtoMerZ。他先拥有了它。

Demo

$(document).ready(function(){
    $(".buttons").click(function () {
    var div= $("#"+this.value);
          div.toggle("slow").siblings().hide("slow");
    });
});

That should do it.

EDIT:

credit for toggle goes to @AtoMerZ. He had it first.

回复收藏 0 原文

巷子口的你 2024-12-06 21:03:38

用这个切换你的脚本：

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

Switch your script with this:

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

回复收藏 0 原文

路还长，别太狂 2024-12-06 21:03:38

jQuery .toggle() 方法应该可以帮助您：

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

来源： http://api.jquery.com/toggle/< /a>

The jQuery .toggle() method should help you:

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

Source: http://api.jquery.com/toggle/

回复收藏 0 原文

旧夏天 2024-12-06 21:03:38

您可以使用 toggle 方法来显示和隐藏元素。这将分别显示/隐藏每个 div：

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

You can use the toggle method for showing and hiding an element. This will show/hide each div individually:

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

回复收藏 0 原文

硪扪都還晓 2024-12-06 21:03:38

假设您希望在显示新的 div 时隐藏所有其他 div：

$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

JS Fiddle 演示。

Assuming that you want all the other divs to be hidden when the new one is shown:

$('.buttons').click(
    function() {
        $('div > div').hide();
        $('div > div').eq($(this).index()).show();
    });

JS Fiddle demo.

回复收藏 0 原文

~没有更多了~

关于作者

梦里的微风

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

如何使用 jquery 制作显示/隐藏切换按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

演示

Demo

关于作者

相关话题

热门标签

推荐作者

Gabu-gabumon

qq_CgiN62

荔枝明

赏烟花じ飞满天

独守阴晴ぅ圆缺

¤→小豸慧

友情链接

如何使用 jquery 制作显示/隐藏切换按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。