jq实现左右导航栏中间内容切换的效果

效果图

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实现左右导航栏中间内容切换的效果》对你有帮助，请点赞、收藏，并留下你的观点哦！