我有一个带有按钮的 h1 标签和一些正确的文本,仅在运行时使用 CSS 和 jQuery 的用户操作后显示。当按钮显示时,我想在 h1 中将文本放在它旁边。
问题是当我添加文本时,我失去了按钮。
HTML看起来像这样......
<h1>
<input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">
</h1>
CSS看起来像这样......
.tabButtonHidden {
visibility: hidden;
}
.tabButtonVisible {
visibility:visible;
}
#newTabButton {
background: rgba(216, 216, 216, 6);
}
h1 {
font: 100% Arial, Arial, Helvetica, sans-serif;
font-size: 1.25em;
font-weight:500;
background: rgba(218, 235, 245, 6);
margin: 0px;
}
jQuery看起来像这样......
if ($("#newTabButton").hasClass("tabButtonHidden")) {
$('#newTabButton').removeClass("tabButtonHidden").addClass("tabButtonVisible");
}
$('h1').text('Now is the time for all good men...');
jQuery 中的最后一行将文本写入按钮通常所在的位置。如果我删除最后一行,更改 html 以包含如下文本,jquery 可以完美运行,当然文本是静态的并且始终可见......
<h1>
<input type="button" value="Open Document In New Window" id="newTabButton" class="tabButtonHidden">Now is the time for all good men...
</h1>
我错过了什么?我需要更改文本并使其和按钮都动态可见。
谢谢你的帮助。