原理与js选项卡切换相同
效果图如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//$(document).ready()作用类似于js的window.onload
$(document).ready(function(){
$("#head li").on("mouseover",function(){
var i=$(this).index();
//改变相应标题的样式,这里用addClass方法添加的新样式与原先样式相同的属性会被原先的样式覆盖掉,导致addClass方法失去作用,所以直接用css方法改变样式
$(this).css({
"background":"#CCFFFF",
"color":"black"
}).siblings().css({
"background":"#00CCFF",
"color":"white"
});
//显示相应标题的内容并隐藏其他内容
$("#content div").eq(i).show().siblings().hide();
});
});
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 14px;
}
.main{
margin: 10px;
}
.main ul{
list-style-type: none;
height: 2em;
}
.main ul li{
float: left;
width: 5em;
height: 2em;
text-align: center;
line-height: 2em;
background: #00CCFF;
color: white;
margin-right: 10px;
cursor: pointer;
}
.main .content{
width: 300px;
padding: 10px;
background: #CCFFFF;
}
.content div{
display: none;
}
.content #first{
display: block;
}
</style>
</head>
<body>
<div class="main" id="main">
<ul class="head" id="head">
<li>栏目一</li>
<li>栏目二</li>
<li>栏目三</li>
</ul>
<div class="content" id="content">
<div id="first">
栏目一的内容<br>
栏目一的内容<br>
栏目一的内容<br>
栏目一的内容<br>
</div>
<div >
栏目二的内容<br>
栏目二的内容<br>
栏目二的内容<br>
栏目二的内容<br>
</div>
<div >
栏目三的内容<br>
栏目三的内容<br>
栏目三的内容<br>
栏目三的内容<br>
</div>
</div>
</div>
</body>
</html>