上面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 关注
- 2757 浏览
添加回答
举报
0/150
提交
取消