首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JS使同级类在单击时消失

可以通过以下步骤实现:

  1. 首先,给需要消失的元素添加一个共同的类名,例如"hideable"。
  2. 使用JavaScript获取所有具有该类名的元素,并将其存储在一个变量中。
  3. 遍历这些元素,并为每个元素添加一个点击事件监听器。
  4. 在点击事件处理程序中,使用CSS的display属性将该元素的显示设置为"none",使其消失。

以下是一个示例代码:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
  <style>
    .hideable {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="hideable">元素1</div>
  <div class="hideable">元素2</div>
  <div class="hideable">元素3</div>

  <script>
    // 获取所有具有类名"hideable"的元素
    var hideableElements = document.getElementsByClassName("hideable");

    // 遍历元素并添加点击事件监听器
    for (var i = 0; i < hideableElements.length; i++) {
      hideableElements[i].addEventListener("click", function() {
        // 将点击的元素的显示设置为"none"
        this.style.display = "none";
      });
    }
  </script>
</body>
</html>

在上述示例中,当点击具有类名"hideable"的元素时,该元素将消失。你可以根据需要修改类名和样式以适应你的实际情况。

请注意,这只是一个简单的示例,仅涉及前端开发中的基本知识。在实际开发中,可能需要考虑更多的交互和兼容性问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券