<style type="text/css">
.topTitle{
background-color: yellow;
width: 300px;
height: 30px;
}
.topTitle ul{
list-style-type: none;
margin-left: -50px;
}
.topTitle ul li{
float: left;
line-height: 30px;
cursor: pointer;
margin-left: 30px;
width: 40px;
padding-left:20px;
text-align: center;
}
.content{
width: 300px;
height: 300px;
background-color: fuchsia;
}
.content div{
display: none;
}
.content .nowShow{
display: block;
}
</style>
</head>
<body>
<div class="topTitle">
<ul>
<li>標題1</li>
<li>標題2</li>
<li>標題3</li>
</ul>
</div>
<div class="content">
<div class="nowShow">標題1</div>
<div>標題2</div>
<div>標題3</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$(".topTitle ul li").mouseover(function() {
var dd = $(".content>div").eq($(".topTitle ul li").index(this));
dd.addClass("nowShow");
dd.siblings().removeClass("nowShow");//siblings()遍歷
});
});
</script>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
