Question

有三个按钮（button 1，button 2和button 3）和三个文字，（text 1，text 2和text 3 ）。每个文本都在其相应的按钮下。想象一下，

[button 1] 
..text 1..
[button 2] 
..text 2.. 
[button 3]
..text 3..

以下条件应适用

当文档加载时，应隐藏所有文本。
点击隐藏相应文字的按钮应显示该文字。
单击显示相应文本的按钮应该隐藏该文本。
在任何给定时间最多应显示一个文本。
如果显示文本，然后单击相应的按钮，则该文本将被隐藏。例如，如果我单击按钮1，则显示文本1。然后我再次单击按钮1，应隐藏文本1。

我怎样才能达到这个效果？

我试着用2个按钮做到这一点，但我无法弄清楚。

var show1 = false; 
var show2 = false;
function showDearPresidentText() {
    if(show1 == false && show2 == false) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="none";
        show1 = true; 
    }
    else if(show1 == true && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="none";
        show1 = false; 
    }
    else if(show1 == false && show2 == true) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="none";
        show1 = true; 
    }
}
function showDearReaderText() {
    if(show1 == false && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="block";
        show2 = true; 
    }
    else if(show1 == true && show2 == false) {
        document.getElementById("text1").style.display="none";
        document.getElementById("text2").style.display="block";
        show1 = true; 
    }
    else if(show1 == false && show2 == true) {
        document.getElementById("text1").style.display="block";
        document.getElementById("text2").style.display="block";
        show1 = false; 
    }
}

Answer 1

尝试在.css()处理程序this

中使用click，Next Adjacent Selector ("prev + next")并将上下文设置为.not()

＆＃13;

$("button").click(function(e) {
  var div = $("+ div", this);   
  div.css("display", div.css("display") === "block" ? "none" : "block");
  $(this.nodeName + " + div").not(div).css("display", "none");
})

＆＃13;

div {
  display:none;
}
button {
  display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>button 0</button>
<div>text 0</div>
<button>button 1</button>
<div>text 1</div>
<button>button 2</button>
<div>text 2</div>
<button>button 3</button>
<div>text 3</div>

＆＃13;

Answer 2

试试这个：

根据您的要求更改CSS：

＆＃13;

<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#button1").click(function() {
        $("#text1").toggle();
        $("#text2").css("display", "none");
        $("#text3").css("display", "none");

      });
      $("#button2").click(function() {
        $("#text2").toggle();
        $("#text1").css("display", "none");
        $("#text3").css("display", "none");
      });
      $("#button3").click(function() {
        $("#text3").toggle();
        $("#text1").css("display", "none");
        $("#text2").css("display", "none");
      });
    });
  </script>
</head>

<body>
  <div>
    <div style="float:left">
      <input type="button" name="button1" value="Button 1" id="button1">
      <div id="text1" style="display:none">Text 1</div>
    </div>
    <div style="float:left">
      <input type="button" name="button2" value="Button 2" id="button2">
      <div id="text2" style="display:none">Text 2</div>
    </div>
    <div style="float:left">
      <input type="button" name="button3" value="Button 3" id="button3">
      <div id="text3" style="display:none">Text 3</div>
    </div>

  </div>
</body>

</html>

＆＃13;

Answer 3

我们不是为您编写完整的代码示例，但这里有用的提示：在.click()方法的主体中获取单击按钮的索引并隐藏除具有相同索引的文本元素之外的所有文本元素

更新：以防万一有人对我解决这个问题的方法感兴趣，这里是示例函数（假设所有按钮都有类'按钮'和所有文本类'text'）：

$('.button').click(function() {
    index = $('.button').index(this);
    $('.text').hide();
    $('.text:eq(' + index + ')').show();
});

Answer 4

请尝试以下修改过的代码。这是示例代码，但您可以明白找出问题

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('.btn').click(function() {
      $('.btn').each(function() {
        $(this).next().hide();
      });
      $(this).next().toggle();
    });
  });
</script>

<body>
  <div>
    <button class="btn">Button 1</button>
    <h1 style="display:none">button's 1 text</h1>
  </div>
  <div>
    <button class="btn">Button 2</button>
    <h1 style="display:none">button's 2 text</h1>
  </div>
  <div>
    <button class="btn">Button 3</button>
    <h1 style="display:none">button's 3 text</h1>
  </div>
</body>

＆＃13;

如果您有任何疑问，请告诉我

由于

Answer 5

这是使用bootstrap和jquery

的解决方案

使用Javascript：

＆＃13;

//using jQuery
//show text on button click
$("button").click(function() {
  $("p").addClass("hide");
  switch (this.id) {
    case "button-1":
      $("p#text-1").removeClass("hide");
      break;
    case "button-2":
      $("p#text-2").removeClass("hide");
      break;
    case "button-3":
      $("p#text-3").removeClass("hide");
      break;
    default:
      break;
  } //close switch
}); //end tabs li click

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!--jQuery-->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<!--using Bootstrap-->
<button type="button" class="btn btn-default" id="button-1">Show Text 1</button>
<br/>
<p id="text-1" class="hide">Text 1</p>
<button type="button" class="btn btn-default" id="button-2">Show Text 2</button>
<br/>
<p id="text-2" class="hide">Text 2</p>
<button type="button" class="btn btn-default" id="button-3">Show Text 3</button>
<br/>
<p id="text-3" class="hide">Text 3</p>
<p class="debug"></p>

＆＃13;

希望这有帮助！

3按钮显示和隐藏HTML的文本

5 个答案: