Maison >interface Web >js tutoriel >HTML, CSS et jQuery : créez une belle navigation par onglets défilants

HTML, CSS et jQuery : créez une belle navigation par onglets défilants

WBOYoriginal: 2023-10-26 09:30:181167parcourir

Dans la conception Web moderne, la navigation par onglets défilants est devenue un élément de conception courant. Il offre aux visiteurs une navigation facile et augmente l’interactivité de la page Web. Cet article expliquera comment utiliser HTML, CSS et jQuery pour créer une belle navigation par onglets défilants et fournira des exemples de code spécifiques.

Tout d’abord, nous devons comprendre la structure de base du HTML. Voici un exemple simple de code HTML :

<!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>

Dans le code ci-dessus, nous utilisons l'élément <nav></nav> pour contenir notre menu de navigation, et l'élément <ul></ul> et les éléments <li> pour créer des éléments de liste de menu de navigation. Chaque élément de la liste est un lien (<a></a>) vers la section correspondante de la page (<section></section>). Veuillez noter que chaque section est identifiée à l'aide d'un attribut id unique. <nav></nav>元素来包含我们的导航菜单，使用<ul></ul>和<li>元素来创建导航菜单的列表项。每个列表项都是一个链接(<a></a>)到页面内对应的部分(<section></section>)。请注意，每个部分都使用了一个唯一的id属性来标识。

接下来，我们需要在CSS中样式化导航菜单。以下是一个简单的CSS代码示例：

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;
}

在这个例子中，我们使用了一些基本的CSS样式来设置导航菜单的外观。通过设置position: fixed，我们将导航菜单固定在页面的顶部。我们还使用了flex布局来水平居中导航菜单列表项，并给它们添加了一些间距。

现在我们将使用jQuery来添加一些交互功能。以下是一个简单的jQuery代码示例：

$(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');
      }
    });
  });
});

在这段代码中，我们使用了scroll事件来监听滚动事件。当发生滚动时，我们遍历每个<section></section>元素，并根据滚动位置来判断当前活跃的部分。通过使用offset()方法来获取每个部分的顶部位置，并结合scrollTop()方法来获取当前滚动位置，我们可以判断哪个部分在视口中。一旦确定了活跃的部分，我们将给相应的导航链接添加一个active

Ensuite, nous devons styliser le menu de navigation en CSS. Voici un exemple de code CSS simple :

rrreee

Dans cet exemple, nous utilisons quelques styles CSS de base pour styliser le menu de navigation. En définissant position:fixe, nous fixons le menu de navigation en haut de la page. Nous avons également utilisé une disposition flex pour centrer horizontalement les éléments de la liste du menu de navigation et leur ajouter un peu d'espacement. 🎜🎜Nous allons maintenant utiliser jQuery pour ajouter quelques fonctionnalités interactives. Voici un exemple simple de code jQuery : 🎜rrreee🎜Dans ce code, nous utilisons l'événement scroll pour écouter les événements de défilement. Lorsque le défilement se produit, nous parcourons chaque élément <section></section> et déterminons la section actuellement active en fonction de la position de défilement. En utilisant la méthode offset() pour obtenir la position supérieure de chaque section, combinée avec la méthode scrollTop() pour obtenir la position actuelle du défilement, nous pouvons déterminer quelle section est dans la fenêtre. Une fois les sections actives identifiées, nous ajouterons une classe active au lien de navigation correspondant pour le mettre en évidence. 🎜🎜Maintenant, nous avons construit une belle navigation par onglets défilants. Au fur et à mesure que l'utilisateur fait défiler la page, le menu de navigation se met automatiquement à jour et affiche la section actuellement active. J'espère que cet exemple de code vous a été utile et vous a aidé à créer de meilleures conceptions Web ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

jquery css html 事件 position flex ul li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser Layui pour obtenir un effet d'épissage d'imageArticle suivant：Comment utiliser Layui pour obtenir un effet d'épissage d'image

Articles Liés

Voir plus