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

有三个按钮（

按钮1

、

按钮2

和

按钮3

）和三个文本（

文本1

、

文本2

和

文本3

）。每个文本都在其相应按钮的正下方。想象一下

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

应适用以下条件：

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

我怎样才能达到这个效果

我试着用两个按钮来做这件事，但我想不出来

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

---

我们不是来为您编写完整的代码示例的，但这里有一个有用的提示：获取

方法体中单击按钮的索引。单击（）

方法并隐藏除具有相同索引的文本元素之外的所有文本元素

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

---

请尝试下面的修改代码。这是示例代码，但您可以了解如何解决您的问题

$（文档）.ready（函数（）{
$（'.btn'）。单击（函数（）{
$（'.btn'）。每个（函数（）{
$（this.next（）.hide（）；
});
$（this.next（）.toggle（）；
});
});
按钮1
按钮的1个文本
按钮2
按钮的2个文本
按钮3
按钮的3个文本

尝试使用

.css（）

，将上下文设置为

此

在

中单击
处理程序，
.not（）


$（“按钮”）。单击（功能（e）{
var div=$（“+div”，本）；
div.css（“显示”，div.css（“显示”）=“块”？“无”：“块”）；
$（this.nodeName+“+div”）.not（div）.css（“display”，“none”）；
})
div{
显示：无；
}
钮扣{
显示：块；
}

按钮0
文本0
按钮1
文本1
按钮2
文本2
按钮3
text 3
这里有一个使用引导和jquery的解决方案

Javascript:


//使用jQuery
//单击按钮时显示文本
$（“按钮”）。单击（函数（）{
$（“p”）.addClass（“隐藏”）；
开关（this.id）{
案例“按钮-1”：
$（“p#text-1”）.removeClass（“隐藏”）；
打破
案例“按钮-2”：
$（“p#text-2”）.removeClass（“隐藏”）；
打破
案例“按钮-3”：
$（“p#text-3”）.removeClass（“隐藏”）；
打破
违约：
打破
}//闭合开关
}); //结束选项卡单击

显示文本1


文本1

显示文本2


文本2

显示文本3


文本3

试试这个：

根据您的要求更改CSS：



$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
$（“#text1”）.toggle（）；
$（“#text2”）.css（“显示”、“无”）；
$（“#text3”）.css（“显示”、“无”）；
});
$（“#按钮2”）。单击（函数（）{
$（“#text2”）.toggle（）；
$（“#text1”）.css（“显示”、“无”）；
$（“#text3”）.css（“显示”、“无”）；
});
$（“#按钮3”）。单击（函数（）{
$（“#text3”）.toggle（）；
$（“#text1”）.css（“显示”、“无”）；
$（“#text2”）.css（“显示”、“无”）；
});
});
文本1
文本2
文本3
添加完整的代码，尝试解决问题我在纸上写了三个按钮的逻辑。但我在代码中也尝试了两个按钮。在这里。可以在问题中包含
html
？是的。我能行。当然。看，我的代码肯定能用……这不一定是我想要的。不过，这是有帮助的。在任何给定时间，我最多只希望显示一个文本。您可以使用
显示
和
隐藏
，而不是设置
css
显示
。感谢您的回复。然而，这也不是我想要的。我们就说有按钮1。我点击按钮，它显示文本1。但当我再次单击按钮1时，我希望文本1被隐藏。@Tushar“您可以使用显示和隐藏而不是设置css显示。”是的。任何一种方法都应该返回类似的结果
$('.button').click(function() {
    index = $('.button').index(this);
    $('.text').hide();
    $('.text:eq(' + index + ')').show();
});