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