HTML, CSS, and jQuery: Build a beautiful scrolling tab navigation-JS Tutorial-php.cn

HTML, CSS, and jQuery: Build a beautiful scrolling tab navigation

WBOY

Release： 2023-10-26 09:30:18

Original

1168 people have browsed it

HTML, CSS, and jQuery: Build a beautiful scrolling tab navigation

HTML, CSS and jQuery: Build a beautiful scrolling tab navigation

In modern web design, scrolling tab navigation has become a common design element. It provides visitors with easy navigation and increases the interactivity of the web page. This article will introduce how to use HTML, CSS and jQuery to build a beautiful scrolling tab navigation, and provide specific code examples.

First, we need to understand the basic structure of HTML. Here is a simple HTML code example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>滚动标签导航</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
    </ul>
  </nav>

  <section id="section1">
    <h1>Section 1</h1>
    <p>This is the content of section 1.</p>
  </section>

  <section id="section2">
    <h1>Section 2</h1>
    <p>This is the content of section 2.</p>
  </section>

  <section id="section3">
    <h1>Section 3</h1>
    <p>This is the content of section 3.</p>
  </section>

  <section id="section4">
    <h1>Section 4</h1>
    <p>This is the content of section 4.</p>
  </section>

  <script src="jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copy after login

In the above code, we use the <nav> element to contain our navigation menu, using <ul> The and <li> elements are used to create the list items of the navigation menu. Each list item is a link (<a>) to the corresponding section (<section>) of the page. Please note that each section is identified using a unique id attribute.

Next, we need to style the navigation menu in CSS. Here is a simple CSS code example:

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  padding: 10px 0;
  z-index: 999;
}

nav ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
  padding: 5px;
}

nav ul li a.active {
  border-bottom: 2px solid #fff;
}

Copy after login

In this example, we use some basic CSS styles to set the appearance of the navigation menu. By setting position: fixed, we fix the navigation menu to the top of the page. We also used flex layout to center the navigation menu list items horizontally and add some spacing to them.

Now we will use jQuery to add some interactive functionality. The following is a simple jQuery code example:

$(document).ready(function() {
  $(window).scroll(function() {
    var scrollPos = $(window).scrollTop();

    $('section').each(function() {
      var offsetTop = $(this).offset().top - 50;
      var sectionHeight = $(this).outerHeight();
      var sectionId = $(this).attr('id');

      if (scrollPos >= offsetTop && scrollPos < (offsetTop + sectionHeight)) {
        $('nav ul li a').removeClass('active');
        $('nav ul li a[href="#' + sectionId + '"]').addClass('active');
      }
    });
  });
});

Copy after login

In this code, we use the scroll event to listen for scroll events. When scrolling occurs, we iterate through each <section> element and determine the currently active section based on the scroll position. By using the offset() method to get the top position of each section, combined with the scrollTop() method to get the current scroll position, we can determine which section is in the viewport. Once the active sections are identified, we will add an active class to the corresponding navigation link to highlight it.

Now, we have built a nice scrolling tab navigation. As the user scrolls the page, the navigation menu automatically updates and displays the currently active section. I hope this code example is helpful and helps you build better web designs!

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful scrolling tab navigation. For more information, please follow other related articles on the PHP Chinese website!