如何使用 JavaScript 隐藏当锚点 href 属性为空时的 span 元素？

在现代 Web 开发中，根据某些条件动态隐藏或显示元素通常是必要的。一个常见的需求是，如果关联的 <a>（锚点）元素具有空的 href 属性，则隐藏 <span> 元素。此功能在处理动态生成的导航菜单或链接时尤其有用。

在本文中，我们将探讨如何使用 JavaScript 实现此行为。我们将深入探讨两种不同的方法：一种利用 JavaScript 事件侦听器，另一种利用 CSS 选择器。通过理解这两种方法，您将能够灵活地选择最适合您的项目需求的方法。

因此，让我们深入了解如何隐藏当 <a> 元素的 href 属性为空时的 <span> 元素。

理解问题

在我们深入了解解决方案之前，让我们先清楚地了解手头的问题。如果关联的 <a> 元素的 href 属性为空，我们希望隐藏 <span> 元素。这意味着当用户与网页交互时，如果特定 <a> 元素没有关联的链接，则相应的 <span> 元素应被隐藏。

为了实现这一点，我们需要 −

  • 识别需要检查的 <a> 元素。

  • 访问每个 <a> 元素的 href 属性。

  • 确定 href 属性是否为空。

  • 根据结果隐藏或显示相应的 <span> 元素。

接下来，我们将讨论第一种技术：使用 JavaScript 事件侦听器隐藏 <span> 元素。

技术 1：使用 JavaScript 事件侦听器

在这种技术中，我们将使用 JavaScript 事件侦听器来监控 <a> 元素的变化，并根据 href 属性隐藏或显示相应的 <span> 元素。

步骤

  • 使用 document.querySelectorAll('a') 选择页面上的所有 <a> 元素。

  • 使用循环遍历选定的元素。

  • 为每个 <a> 元素附加一个点击事件侦听器。

  • 在事件侦听器回调函数中，检查被点击的 <a> 元素的 href 属性是否为空 (href === '')。

  • 如果 href 为空，则通过将其 display 属性设置为 none 来隐藏关联的 <span> 元素。否则，通过将其 display 属性设置为适当的值（例如，block 或 inline）来显示 <span> 元素。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Hide Span on Empty Href</title>
   <style>
      /* Styles for demonstration purposes */
      .hidden {
         display: none;
      }
   </style>
</head>
<body>
   <a href="#">Link 1</a>
   <span>Associated Span 1</span>
   <br>
   <a href="">Link 2</a>
   <span>Associated Span 2</span>
   <br>
   <a href="https://example.com">Link 3</a>
   <span>Associated Span 3</span>   
   <script>
      // Select all <a> elements
      const links = document.querySelectorAll('a');
      
      // Attach event listener to each <a> element
      links.forEach((link) => {
         link.addEventListener('click', function(event) {
            // Check if href is empty
            if (link.href === '') {
               // Hide the associated <span> element
               link.nextElementSibling.style.display = 'none';
            } else {
               // Show the associated <span> element
               link.nextElementSibling.style.display = '';
            }
         });
      });
   </script>
</body>
</html>

在此示例中，我们有三个 <a> 元素及其对应的 <span> 元素。当用户点击 <a> 元素时，如果 href 属性为空，则关联的 <span> 元素将被隐藏。否则，<span> 元素将显示。

接下来，我们将探讨第二种技术：使用 CSS 选择器隐藏 <span> 元素。

技术 2：使用 CSS 选择器

在这种技术中，我们将利用 CSS 选择器来定位和隐藏 <span> 元素，具体取决于关联的 <a> 元素的 href 属性的条件。

步骤

  • 定义一个 CSS 选择器，用于在关联的 <a> 元素的 href 属性为空时定位要隐藏的 <span> 元素。

  • 在 CSS 选择器中使用 :empty 伪类来选择 href 属性为空的 <a> 元素。

  • 指定要隐藏选定 <span> 元素所需的 CSS 属性。例如，您可以将 display 属性设置为 none，或使用其他 CSS 属性（如 visibility 或 opacity）来实现所需的隐藏效果。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Hide Span on Empty Href</title>
   <style>
      /* Styles for demonstration purposes */
      .hidden {
         display: none;
      }
      
      /* CSS selector to target the <span> elements */
      a[href=""]:empty + span {
         display: none;
      }
   </style>
</head>
<body>
   <a href="#">Link 1</a>
   <span>Associated Span 1</span>
   <br>
   <a href="">Link 2</a>
   <span>Associated Span 2</span>
   <br>
   <a href="https://example.com">Link 3</a>
   <span>Associated Span 3</span>
</body>
</html>

在此示例中，我们有三个 <a> 元素及其对应的 <span> 元素。通过使用 CSS 选择器 a[href=""]:empty + span，我们定位紧跟 href 属性为空的 <a> 元素后面的 <span> 元素。然后，我们将这些 <span> 元素的 display 属性设置为 none 以隐藏它们。

在此示例中，我们有三个 <a> 元素及其对应的 <span> 元素。通过使用 CSS 选择器 a[href=""]:empty + span，我们定位紧跟 href 属性为空的 <a> 元素后面的 <span> 元素。然后，我们将这些 <span> 元素的 display 属性设置为 none 以隐藏它们。

比较

本文中讨论的两种技术都提供了当关联的 <a> 元素具有空的 href 属性时隐藏 <span> 元素的解决方案。但是，它们在实现和使用场景方面有所不同。让我们根据几个方面对它们进行比较 −

复杂性和依赖性

  • JavaScript 事件侦听器 − 此技术需要编写 JavaScript 代码来为 <a> 元素附加事件侦听器并操作关联的 <span> 元素的可见性。它涉及更多代码并依赖于 JavaScript。

  • CSS 选择器 − 此技术利用 CSS 选择器根据 <a> 元素的 href 属性的条件来定位和设置 <span> 元素的样式。它纯粹基于 CSS，不需要任何额外的 JavaScript 代码。

灵活性和动态性

  • JavaScript 事件侦听器 − 使用 JavaScript，您可以更灵活地处理 DOM 中的动态更改。您可以动态附加和移除事件侦听器，使其适用于 <a> 元素或其 href 属性可能动态更改的场景。

  • CSS 选择器 − CSS 选择器是静态应用的，并且不知道 DOM 中的动态更改。如果 <a> 元素或其 href 属性动态更改，则 CSS 选择器可能不会自动更新 <span> 元素的可见性。

浏览器支持

  • JavaScript 事件侦听器 − JavaScript 事件侦听器在现代浏览器中得到广泛支持，并提供可靠的跨浏览器兼容性。

  • CSS 选择器 − CSS 选择器得到现代浏览器的良好支持，但旧版浏览器可能对某些高级选择器或伪类支持有限。请确保检查目标受众的兼容性要求。

灵活性和动态性

  • JavaScript 事件侦听器 − JavaScript 事件侦听器涉及运行时代码执行，这可能会对性能造成轻微影响，尤其是在处理大量元素或频繁的 DOM 更新时。

  • CSS 选择器 − CSS 选择器由浏览器高度优化，可以提供高效的元素选择和样式设置。与基于 JavaScript 的解决方案相比，它们通常提供更好的性能。

在为您的特定用例选择合适的技术时，请考虑这些因素。

结论

在本文中，我们讨论了当关联的 <a> 元素具有空的 href 属性时如何隐藏 <span> 元素。我们探讨了两种技术：使用 JavaScript 事件侦听器和利用 CSS 选择器。

通过使用 JavaScript 事件侦听器，我们可以动态监控 <a> 元素的状态，并根据其 href 属性的条件隐藏关联的 <span> 元素。这种方法提供了灵活性，尤其是在需要动态更新的场景中。

另一方面，CSS 选择器提供了一种纯 CSS 解决方案，利用 :empty 等选择器直接定位和隐藏与空 href 属性关联的 <span> 元素。这种方法简单轻便，不需要额外的 JavaScript 代码。

更新于: 2023年8月7日

2K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告