Maison >interface Web >js tutoriel >Comment créer un site Web à onglets en utilisant HTML, CSS et jQuery
Comment créer un site Web à onglets en utilisant HTML, CSS et jQuery
- WBOYoriginal
- 2023-10-26 09:54:20710parcourir
Comment utiliser HTML, CSS et jQuery pour créer un site Web avec des onglets
Aujourd'hui, je vais vous présenter comment utiliser HTML, CSS et jQuery pour créer un site Web avec des onglets. Les balises peuvent nous aider à organiser et à afficher efficacement le contenu du site Web et à offrir une meilleure expérience utilisateur. Vous trouverez ci-dessous un exemple de code spécifique.
Tout d’abord, nous utiliserons HTML pour créer la structure de base du site Web. Nous avons besoin d'un conteneur parent qui contient l'onglet et créons un bloc de contenu correspondant à l'onglet qu'il contient.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>带有标签页的网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="tabs">
<ul class="tab-links">
<li class="active"><a href="#tab1">标签1</a></li>
<li><a href="#tab2">标签2</a></li>
<li><a href="#tab3">标签3</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<h2>标签1内容</h2>
<p>这是标签1的内容。</p>
</div>
<div id="tab2" class="tab">
<h2>标签2内容</h2>
<p>这是标签2的内容。</p>
</div>
<div id="tab3" class="tab">
<h2>标签3内容</h2>
<p>这是标签3的内容。</p>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>Ensuite, nous utiliserons CSS pour styliser nos onglets. Nous utiliserons la mise en page flexible pour implémenter la disposition des étiquettes et des blocs de contenu, ainsi qu'un style de base.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.tabs {
margin: 20px;
}
.tab-links {
display: flex;
list-style: none;
padding: 0;
}
.tab-links li {
margin-right: 10px;
}
.tab-links li a {
display: block;
padding: 10px;
background-color: #ccc;
text-decoration: none;
color: #000;
border-radius: 5px 5px 0 0;
}
.tab-links li.active a {
background-color: #fff;
}
.tab-content {
border: 1px solid #ccc;
padding: 10px;
border-radius: 0 5px 5px 5px;
}
.tab {
display: none;
}
.tab.active {
display: block;
}Enfin, nous utiliserons jQuery pour obtenir l'effet de changement d'étiquette.
$(document).ready(function() {
$(".tab-links li").click(function() {
var tabId = $(this).find("a").attr("href");
$(".tab").removeClass("active");
$(".tab-links li").removeClass("active");
$(this).addClass("active");
$(tabId).addClass("active");
});
});Nous avons maintenant un site Web terminé avec des onglets. Lorsque nous cliquons sur différents onglets, les blocs de contenu correspondants seront affichés et les autres blocs de contenu seront masqués. Nous pouvons ajouter plus de balises et de blocs de contenu en fonction de nos besoins.
J'espère que cet article vous sera utile et vous permettra de créer facilement un site Web avec des onglets en utilisant HTML, CSS et jQuery. Si vous avez des questions, n'hésitez pas à les poser.
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!