html 显示/隐藏JavaScript在同一页面中切换的问题,多个隐藏的文本显示在同一时间,没有JQuery

0yg35tkg  于 2024-01-04  发布在  Java
关注(0)|答案(2)|浏览(111)

这个脚本工作得很好。但我想显示和隐藏不同的文本与不同的扩展/隐藏链接在同一页面的相同多个表。没有jQuery这个简单的脚本是首选。谢谢你的时间和兴趣。
view code

kuarbcqp

kuarbcqp1#

如果你想使用不同的链接在多个表格中切换不同的隐藏文本,这里有一个例子:

  1. function toggleText(textId) {
  2. var hiddenText = document.getElementById(textId);
  3. if (hiddenText.style.display === 'none' || hiddenText.style.display === '') {
  4. hiddenText.style.display = 'block';
  5. } else {
  6. hiddenText.style.display = 'none';
  7. }
  8. }
  1. .hidden-text {
  2. display: none;
  3. }
  1. <table>
  2. <tr>
  3. <td>
  4. <a href="#" onclick="toggleText('text1')">Toggle Text 1</a>
  5. <div id="text1" class="hidden-text">
  6. <p>This is the hidden text for Text 1.</p>
  7. </div>
  8. </td>
  9. </tr>
  10. <!-- Add more tables as needed -->
  11. </table>
  12. <table>
  13. <tr>
  14. <td>
  15. <a href="#" onclick="toggleText('text2')">Toggle Text 2</a>
  16. <div id="text2" class="hidden-text">
  17. <p>This is the hidden text for Text 2.</p>
  18. </div>
  19. </td>
  20. </tr>
  21. <!-- Add more tables as needed -->
  22. </table>
展开查看全部
nnt7mjpx

nnt7mjpx2#

看看这段代码,我试过不使用jQuery。如果你包含jQuery,那就太容易了。

  1. function toggleme(elementId) {
  2. var ele = document.getElementById(elementId);
  3. if (ele.style.display === "block" || ele.style.display === "") {
  4. ele.style.display = "none";
  5. } else {
  6. ele.style.display = "block";
  7. }
  8. }
  1. body {
  2. font-family: Arial, sans-serif;
  3. }
  4. a {
  5. cursor: pointer;
  6. color: blue;
  7. text-decoration: underline;
  8. margin-right: 10px;
  9. }
  10. .hideme {
  11. padding: 10px;
  12. border: 1px solid #ccc;
  13. margin-top: 10px;
  14. }
  1. <a onclick="toggleme('toggleText1');">Show</a>
  2. <div id="toggleText1" class="hideme" style="display: none">
  3. <h1>Hello world 1</h1>
  4. </div>
  5. <a onclick="toggleme('toggleText2');">Show</a>
  6. <div id="toggleText2" class="hideme" style="display: none">
  7. <h1>Hello world 2</h1>
  8. </div>
展开查看全部

相关问题