效果图
HTML主要代码如下
<div class="box">
<div class="left">
<ul id="list">
<li class="lsy"><a href="#img1">新神榜:杨戬</a></li>
<li><a href="#img2">还是觉得你最好</a></li>
<li><a href="#img3">山海经之再见怪兽</a></li>
<li><a href="#img4">神探大战</a></li>
<li><a href="#img5">勇士连</a></li>
<li><a href="#img6">我要和你在一起</a></li>
<li><a href="#img7">人生大事</a></li>
<li><a href="#img8">我世界里的你</a></li>
<li><a href="#img9">你的婚礼</a></li>
</ul>
</div>
<div class="img">
<ul>
<li id="img1" class="image"style="display: block;">
<img src="img/1.jpg" width="398px"height="478px">
</li>
<li id="img2" class="image"style="display: block;">
<img src="img/2.jpg"width="398px"height="478px">
</li>
<li id="img3"class="image"style="display: block;">
<img src="img/3.jpg"width="398px"height="478px">
</li>
<li id="img4"class="image"style="display: block;">
<img src="img/4.jpg"width="398px"height="478px">
</li>
<li id="img5" class="image"style="display: block;">
<img src="img/5.jpg"width="398px"height="478px">
</li>
<li id="img6" class="image"style="display: block;">
<img src="img/6.jpg"width="398px"height="478px">
</li>
<li id="img7" class="image"style="display: block;">
<img src="img/7.jpg"width="398px"height="478px">
</li>
<li id="img8" class="image"style="display: block;">
<img src="img/8.jpg"width="398px"height="478px">
</li>
<li id="img9" class="image"style="display: block;">
<img src="img/9.jpg"width="398px"height="478px">
</li>
<li id="img10" class="image"style="display: block;">
<img src="img/10.jpg"width="398px"height="478px">
</li>
<li id="img11" class="image"style="display: block;">
<img src="img/11.jpg"width="398px"height="478px">
</li>
<li id="img12" class="image"style="display: block;">
<img src="img/12.jpg"width="398px"height="478px">
</li>
<li id="img13" class="image"style="display: block;">
<img src="img/13.jpg"width="398px"height="478px">
</li>
<li id="img14" class="image"style="display: block;">
<img src="img/14.jpg"width="398px"height="478px">
</li>
<li id="img15" class="image"style="display: block;">
<img src="img/15.jpg"width="398px"height="478px">
</li>
<li id="img16" class="image"style="display: block;">
<img src="img/16.jpg"width="398px"height="478px">
</li>
<li id="img17" class="image"style="display: block;">
<img src="img/17.jpg"width="398px"height="478px">
</li>
<li id="img18" class="image"style="display: block;">
<img src="img/18.jpg"width="398px"height="478px">
</li>
</ul>
</div>
<div class="right">
<ul id="list">
<li><a href="#img10">前任三:再见前任</a></li>
<li><a href="#img11">战狼2</a></li>
<li><a href="#img12">独行月球</a></li>
<li><a href="#img13">让子弹飞</a></li>
<li><a href="#img14">中国医生</a></li>
<li><a href="#img15">泰坦尼克号</a></li>
<li><a href="#img16">万里归途</a></li>
<li><a href="#img17">我不是药神</a></li>
<li><a href="#img18">我的姐姐</a></li>
</ul>
</div>
</div>
CSS主要代码如下
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: #ADFF2F;
}
.box{
margin: 0 auto;
width: 812px;
height: 480px;
border: 2px solid #00FFFF;
margin-top: 20px;
margin-left: 20px;
float: left;
}
.left{
width: 200px;
height: 480px;
border: 2px solid #00FFFF;
float: left;
}
.img{
width: 400px;
height: 480px;
border: 2px solid #00FFFF;
float: left;
display: block;
}
.right{
width: 200px;
height: 480px;
border: 2px solid #00FFFF;
float: left;
}
#list{
color: #ADFF2F;
text-align: center;
line-height: 50px;
}
#list li{
width: 200px;
height: 49px;
border: 1px solid #00FFFF;
margin-top: 2px;
background-color: burlywood;
text-decoration: none;
}
#list li:hover{
background-color: cornflowerblue;
color: aquamarine;
}
.lsy a{text-decoration: none;
color: greenyellow;
}
jq主要代码
<script> $(".image").hide(); $("#list li:first").addClass("lsy").show(); $(".image:first").show(); $("#list li").click(function() { $("#list li").removeClass("lsy"); $(this).addClass("lsy"); $(".image").hide(); var activeTab = $(this).find("a").attr("href"); $(activeTab).fadeIn(); return false; }); </script>
如果觉得《jq实现左右导航栏中间内容切换的效果》对你有帮助,请点赞、收藏,并留下你的观点哦!