上面4個li標題，下面4個li內容,鼠標移入第1個li，下面內容對應第1個li,鼠標移入第2個li，下面內容對應第2個li。。不移動鼠標.默認顯示全部內容!!!? 用JQ的，新手，練習
4 回答
已采納
業余奶茶品鑒師
TA貢獻260條經驗 獲得超388個贊
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>Document</title>
????<style>???
????????*{padding:0;margin:0;}???
????????.con?{width:375px;height:680px;background:#e9f8fd;}???
????????.hedbq{overflow:?hidden;margin:?0;?padding:?0;}???
????????.hedbq?li{?width:?25%;?height:?30px;?line-height:?30px;?background:#f2f8f9;?color:#4f6f72;?float:?left;?list-style:?none;?text-align:?center;?}???
????????.hedbq?li.bqtit{background:#87b8b5;}
????????.content{width:80%;padding:?20px?10%;?background:#f5fbfb;color:#87b8b5;?height:600px;?}???
????????.hide?{display:none;}???
????</style>
</head>
<body>
????<div?class="con">
????????<ul?id="hedbq"?class="hedbq">
????????????<li>常問常答</li>
????????????<li>新書推薦</li>
????????????<li>最新信息</li>
????????????<li>電子資源</li>
????????</ul>
????????<div?class="content">
????????????<div?class="bqcont">
????????????????<p>中文圖書自建數據庫</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>中文圖書自建數據庫</p>
????????????????<p>醫學知識管理平臺</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>外文電子期刊</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>數據庫</p>
????????????</div>
????????</div>
????</div>
</body>
<script?src="?
<script>???
????$("#hedbq?li").each(function(index)?{????????
????????var?xuanze?=?$(this);????????
????????$(this).mouseover(function(){???????????
????????????$(".bqcont").addClass("hide");???????????
????????????$("#hedbq?li.bqtit").removeClass("bqtit");???????????
????????????$(".bqcont").eq(index).removeClass("hide");???????????
????????????xuanze.addClass("bqtit");?????????
????????}).mouseout(function(){})???
????})
</script>
</html>連樣式都給你寫好了，給個采納吧
-
業余奶茶品鑒師私聊哦
- 4 回答
- 0 關注
- 2712 瀏覽
添加回答
舉報
0/150
提交
取消