这个脚本工作得很好。但我想显示和隐藏不同的文本与不同的扩展/隐藏链接在同一页面的相同多个表。没有jQuery这个简单的脚本是首选。谢谢你的时间和兴趣。view code
kuarbcqp1#
如果你想使用不同的链接在多个表格中切换不同的隐藏文本,这里有一个例子:
function toggleText(textId) { var hiddenText = document.getElementById(textId); if (hiddenText.style.display === 'none' || hiddenText.style.display === '') { hiddenText.style.display = 'block'; } else { hiddenText.style.display = 'none'; } }
function toggleText(textId) {
var hiddenText = document.getElementById(textId);
if (hiddenText.style.display === 'none' || hiddenText.style.display === '') {
hiddenText.style.display = 'block';
} else {
hiddenText.style.display = 'none';
}
.hidden-text { display: none; }
.hidden-text {
display: none;
<table> <tr> <td> <a href="#" onclick="toggleText('text1')">Toggle Text 1</a> <div id="text1" class="hidden-text"> <p>This is the hidden text for Text 1.</p> </div> </td> </tr> <!-- Add more tables as needed --> </table> <table> <tr> <td> <a href="#" onclick="toggleText('text2')">Toggle Text 2</a> <div id="text2" class="hidden-text"> <p>This is the hidden text for Text 2.</p> </div> </td> </tr> <!-- Add more tables as needed --> </table>
<table>
<tr>
<td>
<a href="#" onclick="toggleText('text1')">Toggle Text 1</a>
<div id="text1" class="hidden-text">
<p>This is the hidden text for Text 1.</p>
</div>
</td>
</tr>
<!-- Add more tables as needed -->
</table>
<a href="#" onclick="toggleText('text2')">Toggle Text 2</a>
<div id="text2" class="hidden-text">
<p>This is the hidden text for Text 2.</p>
nnt7mjpx2#
看看这段代码,我试过不使用jQuery。如果你包含jQuery,那就太容易了。
function toggleme(elementId) { var ele = document.getElementById(elementId); if (ele.style.display === "block" || ele.style.display === "") { ele.style.display = "none"; } else { ele.style.display = "block"; } }
function toggleme(elementId) {
var ele = document.getElementById(elementId);
if (ele.style.display === "block" || ele.style.display === "") {
ele.style.display = "none";
ele.style.display = "block";
body { font-family: Arial, sans-serif;}a { cursor: pointer; color: blue; text-decoration: underline; margin-right: 10px;}.hideme { padding: 10px; border: 1px solid #ccc; margin-top: 10px;}
body {
font-family: Arial, sans-serif;
a {
cursor: pointer;
color: blue;
text-decoration: underline;
margin-right: 10px;
.hideme {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
<a onclick="toggleme('toggleText1');">Show</a><div id="toggleText1" class="hideme" style="display: none"> <h1>Hello world 1</h1></div><a onclick="toggleme('toggleText2');">Show</a><div id="toggleText2" class="hideme" style="display: none"> <h1>Hello world 2</h1></div>
<a onclick="toggleme('toggleText1');">Show</a>
<div id="toggleText1" class="hideme" style="display: none">
<h1>Hello world 1</h1>
<a onclick="toggleme('toggleText2');">Show</a>
<div id="toggleText2" class="hideme" style="display: none">
<h1>Hello world 2</h1>
2条答案
按热度按时间kuarbcqp1#
如果你想使用不同的链接在多个表格中切换不同的隐藏文本,这里有一个例子:
nnt7mjpx2#
看看这段代码,我试过不使用jQuery。如果你包含jQuery,那就太容易了。