This function is commonly used in today’s websites, which is to classify some content in the form of tabs. , such as the Tmall mall below.
The following source code is modeled after a tab written by Tmall. The effect of implementation is as follows.
Mainly uses the click event that triggers the corresponding section when we click it, and then displays and hides the corresponding items in the content display box (tabbox) in the click event.
At the same time, hover is used to add a mouse-over effect.
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>
The above is the entire content of this article. I hope it will be helpful for everyone to master the skills of tab switching.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
