Avec le développement d'Internet, les interfaces des sites Web sont devenues de plus en plus cool et les onglets sont devenus l'un des éléments d'interface utilisateur courants des sites Web modernes. Cet article explique comment utiliser JavaScript pour écrire des onglets afin de rendre votre site Web plus moderne.
- Structure HTML
Tout d'abord, nous devons créer la structure d'onglets en HTML. Vous pouvez utiliser le code suivant :
<div class="tab-container">
<ul class="tab-nav">
<li class="tab-nav-item active">Tab 1</li>
<li class="tab-nav-item">Tab 2</li>
<li class="tab-nav-item">Tab 3</li>
</ul>
<div class="tab-content active">Tab 1 content</div>
<div class="tab-content">Tab 2 content</div>
<div class="tab-content">Tab 3 content</div>
</div>
Copier après la connexion
La structure HTML ci-dessus contient un conteneur d'onglets (tab-container), qui contient une option Navigation par carte. barre (onglet-nav) et contenu de l'onglet (onglet-contenu). Dans une barre de navigation, chaque onglet est un élément de liste (tab-nav-item), et l'onglet actuellement sélectionné peut être indiqué en ajoutant une classe « active ». Dans le contenu, vous pouvez également indiquer le contenu de l'onglet actuellement sélectionné en ajoutant la classe "active".
- Style CSS
Ensuite, nous devons ajouter des styles aux onglets et au contenu. Vous pouvez utiliser le code suivant :
.tab-container {
display: flex;
flex-direction: column;
margin: 20px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
padding: 10px;
}
.tab-nav-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
.tab-nav-item:hover {
background: #fff;
}
.tab-nav-item.active {
background: #fff;
font-weight: bold;
}
.tab-content {
padding: 20px;
display: none;
}
.tab-content.active {
display: block;
}Copier après la connexion
Le style CSS ci-dessus définit l'emplacement, la taille, la bordure, l'ombre et d'autres propriétés de l'onglet. conteneur et styles pour le contenu de la barre de navigation et des onglets. Notez que la propriété d'affichage du contenu de l'onglet est définie sur none, qui ne sera affichée que lorsque l'onglet correspondant est sélectionné.
- Code JavaScript
Enfin, nous devons écrire du code JavaScript pour que le commutateur d'onglet s'affiche au clic. Vous pouvez utiliser le code suivant :
const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
// 首先隐藏所有选项卡内容
for (let j = 0; j < contents.length; j++) {
contents[j].classList.remove('active');
}
// 设置当前选中的选项卡添加 "active" 类
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
this.classList.add('active');
contents[i].classList.add('active');
});
}Copier après la connexion
Le code JavaScript ci-dessus utilise un écouteur d'événement pour implémenter la fonction de changement du contenu de l'onglet correspondant lorsque vous cliquez sur la barre de navigation de l'onglet. Tout d'abord, masquez tout le contenu de l'onglet, puis définissez l'onglet actuellement sélectionné et le contenu correspondant pour ajouter la classe « active » afin d'obtenir l'effet d'afficher le contenu de l'onglet.
- Code complet
Enfin, nous combinons les codes HTML, CSS et JavaScript ci-dessus pour former le code complet comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab 选项卡</title>
<style>
.tab-container {
display: flex;
flex-direction: column;
margin: 20px;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px;
}
.tab-nav {
display: flex;
justify-content: space-between;
align-items: center;
background: #eee;
padding: 10px;
}
.tab-nav-item {
cursor: pointer;
padding: 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
.tab-nav-item:hover {
background: #fff;
}
.tab-nav-item.active {
background: #fff;
font-weight: bold;
}
.tab-content {
padding: 20px;
display: none;
}
.tab-content.active {
display: block;
}
</style>
</head>
<body>
<div class="tab-container">
<ul class="tab-nav">
<li class="tab-nav-item active">Tab 1</li>
<li class="tab-nav-item">Tab 2</li>
<li class="tab-nav-item">Tab 3</li>
</ul>
<div class="tab-content active">Tab 1 content</div>
<div class="tab-content">Tab 2 content</div>
<div class="tab-content">Tab 3 content</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab-nav-item');
const contents = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', function() {
// 首先隐藏所有选项卡内容
for (let j = 0; j < contents.length; j++) {
contents[j].classList.remove('active');
}
// 设置当前选中的选项卡添加 "active" 类
for (let j = 0; j < tabs.length; j++) {
tabs[j].classList.remove('active');
}
this.classList.add('active');
contents[i].classList.add('active');
});
}
</script>
</body>
</html>Copier après la connexion
Maintenant, vous pouvez implémenter vous-même un onglet en copiant et collant le code ci-dessus, afin que votre le site Web est plus moderne.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
