文章内容
本文介绍一个简单的选项卡效果，代码如下
html代码
<script type="text/javascript" src="jquery/3.3.1/jquery.min.js"></script>
<style>
*
{
margin: 0px;
padding: 0px;
}
a
{
text-decoration: none;
color: #333;
transition: 0.3s;
}
.w
{
width: 1200px;
margin: auto;
padding: 35px 0;
}
.clearfix:after
{
clear: both;
content: ' ';
display: block;
font-size: 0;
line-height: 0;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix
{
zoom: 1;
}
.tab a
{
width: 110px;
height: 30px;
text-align: center;
line-height: 30px;
color: #333;
font-size: 20px;
float: left;
}
.tab a.active
{
background: #000;
color: #fff;
}
.tab a.active span
{
display: inline-block;
}
.list
{
margin-top: 20px;
overflow: hidden;
}
.list li
{
height: 150px;
overflow: hidden;
position: relative;
width: 210px;
float: left;
margin-right: 30px;
}
.list li img
{
width: 100%;
}
.list li .tit
{
background: rgba(0,0,0,0.5);
width: 100%;
text-align: center;
line-height: 30px;
height: 30px;
position: absolute;
bottom: 0;
left: 0;
color: #fff;
font-size: 16px;
}
.list li:hover .tit
{
background: rgba(0, 0, 0, 1);
}
.hide
{
display: none;
}
</style>
<div class="w">
<div class="tab clearfix">
<a href="javascript:;" class="active"><span>选项一</span></a> <a href="javascript:;"><span>
选项二</span></a>
</div>
<!--切换-->
<div class="list">
<ul class="clearfix">
<li><a href="javascript:void(0);">
<img src="images/1.jpg" />
<h3 class="tit">
图片标题</h3>
</a></li>
<li><a href="javascript:void(0);">
<img src="images/1.jpg" />
<h3 class="tit">
图片标题</h3>
</a></li>
<li><a href="javascript:void(0);">
<img src="images/1.jpg" />
<h3 class="tit">
图片标题</h3>
</a></li>
</ul>
</div>
<!--切换 End-->
<!--切换-->
<div class="list hide">
<ul class="clearfix">
<li><a href="javascript:void(0);">
<img src="images/1.jpg" />
<h3 class="tit">
图片标题</h3>
</a></li>
<li><a href="javascript:void(0);">
<img src="images/1.jpg" />
<h3 class="tit">
图片标题</h3>
</a></li>
</ul>
</div>
<!--切换 End-->
</div>
<script>
//tab切换
$(".tab a").click(function () {
var num = $(this).index();
$(".tab a").removeClass("active");
$(this).addClass("active");
$(".list").hide().eq(num).show()
});
</script>
