如何使用 JavaScript 实现一个简单的网页导航栏效果？

1个月前更新

要实现一个简单的网页导航栏效果，您可以使用 HTML 和 CSS 来布局网页，并使用 JavaScript/jQuery 来触发点击事件并改变元素的样式。

<html>
    <head>
        <!-- Your stylesheet here -->
    </head>
    
    <body>

        <!-- Navigation bar with links -->
        <div id="navigation-bar">
            <a href="#one">link one</a>
            <a href="#two">link two</a>
            <a href="#three">link three</a>
        </div>
          
        <!-- Inside JavaScript/jQuery code -->
        <script>     
            // Getting the navigation element                  
            var navbar = document.getElementById('navigation-bar'); 
  
            // Adding click event listen on every link inside the navbar
            navbar.addEventListener('click', function(event) {
 
            // Condition to check if the clicked element is a link
            if (event.target.tagName === 'A') {                 
                // Remove active class to all links inside navbar 
                let current = navbar.getElementsByClassName("active");                  
                current[0].className = current[0].className.replace(" active", "");                 
                 
                // Add the active class to the clicked link 
                event.target.className += " active"; 
              }
           });
        </script>
    </body>
</html>

评分

欢迎为他评分