首頁猿問 jq鼠標(biāo)移入顯示對(duì)應(yīng)的數(shù)據(jù)

jq鼠標(biāo)移入顯示對(duì)應(yīng)的數(shù)據(jù)

JQuery

慕粉3870905 2018-07-31 11:35:04

上面4個(gè)li標(biāo)題，下面4個(gè)li內(nèi)容,鼠標(biāo)移入第1個(gè)li，下面內(nèi)容對(duì)應(yīng)第1個(gè)li,鼠標(biāo)移入第2個(gè)li，下面內(nèi)容對(duì)應(yīng)第2個(gè)li。。不移動(dòng)鼠標(biāo).默認(rèn)顯示全部?jī)?nèi)容!!!? 用JQ的，新手，練習(xí)

查看完整描述

4 回答

已采納

業(yè)余奶茶品鑒師

TA貢獻(xiàn)260條經(jīng)驗(yàn) 獲得超388個(gè)贊

<!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>中文圖書自建數(shù)據(jù)庫</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>中文圖書自建數(shù)據(jù)庫</p>
????????????????<p>醫(yī)學(xué)知識(shí)管理平臺(tái)</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>外文電子期刊</p>
????????????</div>
????????????<div?class="bqcont">
????????????????<p>數(shù)據(jù)庫</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>

連樣式都給你寫好了，給個(gè)采納吧

4 反對(duì) 回復(fù) 2018-07-31