<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tag</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
ul li{
width: 100px;
float: left;
list-style: none;
}
.tab{display: none;}
.active{
border:1px solid red;
}
.content{clear: both;}
.content .selected{
display: block;
}
//active 用来显示下划线
//selected 用来控制显示(默认都是隐藏的)
</style>
<script type="text/javascript" src="jquery-1.12.4.min.js" ></script>
<script type="text/javascript">
$(function(){
$("ul>li").mouseenter(function(){
//给li添加下横线
$(this).addClass('active').siblings('li').removeClass('active');
var index = $(this).index();
//显示对应的div
$('.tab').eq(index).addClass('s
html5自己编写的jquery切换页面Tag功能
最新推荐文章于 2023-11-04 19:03:50 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)