html 实现对文本的显示和隐藏,3按钮显示和隐藏HTML的文本-优快云博客

这篇博客介绍了如何使用HTML和jQuery实现按钮控制文本的显示和隐藏。通过点击不同的按钮，可以切换显示对应的文本内容，同时隐藏其他文本。示例代码包括了多种实现方式，包括切换显示、使用toggle()函数、以及根据按钮索引隐藏和显示文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

5 个答案:

答案 0 :(得分：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;

button 0

text 0

button 1

text 1

button 2

text 2

button 3

text 3

＆＃13;＆＃13;＆＃13;

答案 1 :(得分：1)

试试这个：

根据您的要求更改CSS：

＆＃13;

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

});

Text 1

Text 2

Text 3

＆＃13;＆＃13;＆＃13;

答案 2 :(得分：0)

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

＆＃13;

$(document).ready(function() {

$('.btn').click(function() {

$('.btn').each(function() {

$(this).next().hide();

});

$(this).next().toggle();

});

Button 1

button's 1 text

Button 2

button's 2 text

Button 3

button's 3 text

＆＃13;＆＃13;＆＃13;

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

由于

答案 3 :(得分：0)

这是使用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;

Show Text 1

Show Text 2

Show Text 3

希望这有帮助！

答案 4 :(得分：0)

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

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

$('.button').click(function() {

index = $('.button').index(this);

$('.text').hide();

$('.text:eq(' + index + ')').show();

});