Diese Funktion wird häufig auf heutigen Websites verwendet und dient dazu, einige Inhalte in Form von Registerkarten zu klassifizieren. , wie zum Beispiel das Tmall-Einkaufszentrum unten.
Der folgende Quellcode ist einem von Tmall geschriebenen Tab nachempfunden. Die Wirkung der Implementierung ist wie folgt.
Verwendet hauptsächlich das Klickereignis, das den entsprechenden Abschnitt auslöst, wenn wir darauf klicken, und zeigt dann die entsprechenden Elemente im Inhaltsanzeigefeld (Tabbox) im Klickereignis an und aus.
Gleichzeitig wird durch Hover ein Mouseover-Effekt hinzugefügt.
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>
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, die Fähigkeiten des Tab-Wechsels zu beherrschen.
Was sind die JQuery-Plug-Ins?
So bedienen Sie JSON mit JQuery
So löschen Sie Elemente in JQuery
Verwendung der jQuery-Methode hover()
jquery implementiert die Paging-Methode
Was ist ein verstecktes Element in jquery?
Was wird in jquery hervorgehoben?
Schauen Sie sich die zehn Kryptowährungen an, in die sich eine Investition lohnt
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
