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
HTML, CSS et jQuery : créez une belle navigation par onglets défilants
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 id="Section">Section 1</h1>
<p>This is the content of section 1.</p>
</section>
<section id="section2">
<h1 id="Section">Section 2</h1>
<p>This is the content of section 2.</p>
</section>
<section id="section3">
<h1 id="Section">Section 3</h1>
<p>This is the content of section 3.</p>
</section>
<section id="section4">
<h1 id="Section">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> pour contenir notre menu de navigation, et l'élément <ul></code > et les éléments <code><li> pour créer des éléments de liste de menu de navigation. Chaque élément de la liste est un lien (<a>) vers la section correspondante de la page (<section>). Veuillez noter que chaque section est identifiée à l'aide d'un attribut id unique. <nav>元素来包含我们的导航菜单，使用<ul>和<li>元素来创建导航菜单的列表项。每个列表项都是一个链接(<a>)到页面内对应的部分(<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>元素，并根据滚动位置来判断当前活跃的部分。通过使用offset()方法来获取每个部分的顶部位置，并结合scrollTop()方法来获取当前滚动位置，我们可以判断哪个部分在视口中。一旦确定了活跃的部分，我们将给相应的导航链接添加一个active
rrreee
Dans cet exemple, nous utilisons quelques styles CSS de base pour styliser le menu de navigation. En définissantposition: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> 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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Les rôles de HTML, CSS et JavaScript: responsabilités de base
Apr 08, 2025 pm 07:05 PM
HTML définit la structure Web, CSS est responsable du style et de la mise en page, et JavaScript donne une interaction dynamique. Les trois exercent leurs fonctions dans le développement Web et construisent conjointement un site Web coloré.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
