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

HTML, CSS and jQuery: Build a beautiful tab navigation

Navigation is one of the very important parts of the website, it can help users find it quickly and accurately Content they want. In this article, we will introduce how to build a beautiful tab navigation using HTML, CSS and jQuery.

<li>HTML Structure

First, we need to create the HTML structure of the navigation. We will use an unordered list (<ul></ul>) to create navigation entries, with each entry represented using a list item (<li>). Each list item contains a link (<a></a>) and sets a unique ID so we can use it in a later step.

Sample code is as follows:

<ul class="nav-tabs">
  <li><a href="#tab1" class="active">标签页1</a></li>
  <li><a href="#tab2">标签页2</a></li>
  <li><a href="#tab3">标签页3</a></li>
  <li><a href="#tab4">标签页4</a></li>
</ul>

<li>CSS Styles

Next, we need to add some styles to the navigation so that it looks nice and matches the website The style is consistent. We can use CSS to accomplish this task.

The sample code is as follows:

.nav-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-tabs li {
    margin-right: 10px;
}

.nav-tabs li a {
    display: block;
    padding: 10px;
    color: #333;
    text-decoration: none;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px 5px 0 0;
}

.nav-tabs li a.active {
    background-color: #fff;
    border-bottom: none;
}

In this example, we set the list style of the navigation entry to none and remove the default list style. Then set the spacing of each entry and set some basic styles for the links, such as background color, border style, etc. Finally, we also added a special style for the currently active navigation item.

<li>jQuery script

Next, we need to use jQuery to add some interactive effects, such as switching content display when clicking on the navigation item.

The sample code is as follows:

$(document).ready(function() {
  $('.nav-tabs a').click(function(e) {
    e.preventDefault();
    $('.nav-tabs a').removeClass('active');
    $(this).addClass('active');
    
    var tabId = $(this).attr('href');
    $('.tab-content div').removeClass('active');
    $(tabId).addClass('active');
  });
});

In this example, we first use $(document).ready to ensure that the script is executed after the page is loaded. Then, we added a click event for each navigation link. When a link is clicked, we first remove the active class from all navigation links and then add the active class for the currently clicked link. Next, we use the href attribute of the link to get the ID of the corresponding content area, remove the active class from all content areas, and then add to the current corresponding content area. active class.

<li>Complete effect

Now, we have completed a beautiful tab navigation. When clicking on different navigation items, the content area switches accordingly.

You can modify the navigation style as needed and add more tab navigation entries and corresponding content areas. At the same time, you can also use other animation effects to enhance the user experience.

Summary

Building a beautiful tab navigation using HTML, CSS and jQuery is a simple and fun task. With proper HTML structure, CSS styles and jQuery scripts, we can create attractive navigation effects and provide users with a good user experience. I hope this article helps you build your own tab navigation!

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