加上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
.map,.img-map{
list-style:none;
}
.map>li{
width:50px;
height:30px;
float:left;
background-color:#ff6a00;
text-align:center;
line-height:30px;
}
.img-map>li{
display:none;
width:200px;
height:200px;
}
.img-map>li>img{
width:200px;
height:200px;
}
.img-map>.lishow{
display:block;
}
.lishow{
display:block !important;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
$(".map>li").mouseenter(function () {
$(this).css("backgroundColor", "grey");
$(this).siblings().css("backgroundColor", "#ff6a00");
var kk = $(this).index();
$(".img-map>li").eq(kk).addClass("lishow").siblings().removeClass("lishow").css("display", "none");
})
})
</script>
</head>
<body>
<div>
<ul class="map">
<li>周杰伦</li>
<li>林俊杰</li>
<li>文章</li>
<li>朱亚文</li>
</ul>
<ul class="img-map">
<li class="lishow"><img src="Tabimg/0.jpg" /></li>
<li><img src="Tabimg/1.jpg"/></li>
<li><img src="Tabimg/2.jpg"/></li>
<li><img src="Tabimg/3.jpg"/></li>
</ul>
</div>
</body>
</html>
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
