3按钮显示和隐藏HTML文本

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

尝试在click处理程序.not()使用.css() ，下一个相邻选择器（“ prev + next”），并将上下文设置this

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

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

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

Answer 2

试试这个：

根据您的要求更改CSS：

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

Answer 3

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

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

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

Answer 4

请尝试以下修改后的代码。这是示例代码，但您可以了解一下问题所在

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

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

谢谢

Answer 5

这是使用引导程序和jQuery的解决方案

Javascript：

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

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

希望这可以帮助！

3按钮显示和隐藏HTML文本

问题描述

5 个解决方案

解决方案1
1 已采纳 2015-09-19 04:51:39

解决方案2
1 2015-09-19 05:04:39

解决方案3
0 2015-09-19 04:37:14

解决方案4
0 2015-09-19 04:49:07

解决方案5
0 2015-09-19 05:03:10

3按钮显示和隐藏HTML文本

问题描述

5 个解决方案

解决方案1 1 已采纳 2015-09-19 04:51:39

解决方案2 1 2015-09-19 05:04:39

解决方案3 0 2015-09-19 04:37:14

解决方案4 0 2015-09-19 04:49:07

解决方案5 0 2015-09-19 05:03:10

解决方案1
1 已采纳 2015-09-19 04:51:39

解决方案2
1 2015-09-19 05:04:39

解决方案3
0 2015-09-19 04:37:14

解决方案4
0 2015-09-19 04:49:07

解决方案5
0 2015-09-19 05:03:10