原理與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>