切换按钮以显示内容并隐藏其他内容

Question

不确定我的标题是否清楚，对不起。我们假设我有2个按钮，每个按钮都有jQuery toggle()来显示/隐藏自己的内容。它就像我单击按钮1，第1段显示（我在页面加载时隐藏它）。按钮2和段落2也是如此。

但是，我真的想在点击其他按钮时隐藏当前段落，这样我一次只能显示1个段落。例如，当我单击按钮1时，第1段显示。然后再次单击它时，段落隐藏。但是如果我点击另一个按钮（说按钮2），我希望段落1隐藏而段落2显示。是否可以这样做？

请在这里查看我的笔：Codepen

谢谢。

Answer 1

试试这个：

$(document).ready(function(){
   $("#p1").hide();
   $("#p2").hide();

   $("#btn1").click(function(){
      $("#p1").toggle();
      $("#p2").hide();
   });
   $("#btn2").click(function(){
      $("#p2").toggle();
      $("#p1").hide();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>


<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>

Answer 2

修改了您的html和js，使其更加简单。这是怎么回事..

<强> HTML

<button id="btn1" class="btn" data-toggle="#p1">Button 1</button>
<button id="btn2" class="btn" data-toggle="#p2">Button 2</button>


<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>

• 添加属性data-toggle以切换特定段落，并将其id添加为此属性的值。
• 将class添加到每个button，这样我们就只能为event所有button撰写$(document).ready(function(){ $("#p1").hide(); $("#p2").hide(); //attaching event to .btn class $(".btn").click(function(){ var targetElement=$(this).data('toggle'); //get its data-toggle value $('p').hide();//hide all p tags $(targetElement).show(); //show only targeted p tag }); }); 。

<强> JS

}(window, document));
  ^

ReferenceError: window is not defined

<强>

的 UPDATED PEN

Answer 3

如果您想要可扩展的内容，可以使用数据属性来标识分页段落。

＆＃13;

＆＃13;

$(function() {
  var $pages = $("p");
  $pages.hide();

  $("button").click(function() {
    $pages.hide();
    $('#' + $(this).data("target")).show();
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-target="p1">Button 1</button>
<button data-target="p2">Button 2</button>


<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 4

是的，可以隐藏其他段落并显示特定段落。将您的jquery代码更改为以下内容：

$(document).ready(function(){
   $("#p1").hide();
   $("#p2").hide();

   $("#btn1").click(function(){
      $("#p2").hide();
      $("#p1").toggle();
   });
   $("#btn2").click(function(){
      $("#p1").hide();
      $("#p2").toggle();
   });
});

OR 您甚至可以通过向按钮标记添加属性来简化代码：

HTML：

<button id="btn1" class="btn" data-ref="p1">Button 1</button>
<button id="btn2" class="btn" data-ref="p2">Button 2</button>

<p id="p1">This is a paragraph 1.</p>
<p id="p2">This is a paragraph 2.</p>

jQuery：

$(document).ready(function(){
   $("p").hide();
   $('button').click(function() {
      var id = $(this).attr('data-ref');
      $('p').hide();
      $('body').find('#'+id).show();
   });
});