Cette fonction est couramment utilisée dans les sites Web d'aujourd'hui, qui consiste à classer certains contenus sous forme d'onglets. , comme le centre commercial Tmall ci-dessous.
Le code source suivant est calqué sur un onglet écrit par Tmall. L'effet de l'implémentation est le suivant.
Utilise principalement l'événement click qui déclenche la section correspondante lorsque nous cliquons dessus, puis affiche et masque les éléments correspondants dans la zone d'affichage du contenu (tabbox) dans l'événement click.
En même temps, le survol est utilisé pour ajouter un effet de survol de la souris.
Code :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js"></script>
<title></title>
<script>
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () { //定义了tan_menu对应的单击事件，也就是类别的单击事件。
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li.index(this);
$("div.tab_box>div").eq(index).show()
.siblings().hide();
}).hover(function () { //定义了鼠标滑过特效
$(this).addClass("hover");
}, function () {
$(this).removeClass("hover");
});
});
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de maîtriser les compétences de changement d'onglet.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Comment ouvrir le fichier URL
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
