tab选项卡

HTML样式

<div class="tel">
          <div class="tel_nav">
                <ul>
                    <li class="active"><a href="javascript:void(0)">知名门户</a></li>
                    <li><a href="javascript:void(0)" >财经媒体</a></li>
                    <li><a href="javascript:void(0)">科技媒体</a></li>
                    <li><a href="javascript:void(0)">娱乐媒体</a></li>
                    <li><a href="javascript:void(0)">其他媒体</a></li>
                </ul>
            </div>
            <div class="tel_website">
                <ul class="active">
                    <li><a href="javascript:void(0)"><img src="image/media/media_1_2.png" alt=""></a></li>
                    <li><a href="javascript:void(0)"><img src="image/media/media_1_1.png" alt=""></a></li>
                    
                </ul>
                <ul>
                    <li><a href="javascript:void(0)"><img src="image/media/media_2_1.png" alt=""></a></li>
                    <li><a href="javascript:void(0)"><img src="image/media/media_2_2.png" alt=""></a></li>
                    
                </ul>
                <ul>
                    <li><a href="javascript:void(0)"><img src="image/media/media_3_1.png" alt=""></a></li>
                    <li><a href="javascript:void(0)"><img src="image/media/media_3_2.png" alt=""></a></li>
                    
                </ul>
                <ul>
                    <li><a href="javascript:void(0)"><img src="image/media/media_4_1.png" alt=""></a></li>
                    <li><a href="javascript:void(0)"><img src="image/media/media_4_2.png" alt=""></a></li>
                    
                </ul>
                <ul>
                    <li><a href="javascript:void(0)"><img src="image/media/media_5_1.png" alt=""></a></li>
                    <li><a href="javascript:void(0)"><img src="image/media/media_5_2.png" alt=""></a></li>
                </ul>
            </div>
        </div>

 

css样式

.tel{
   width: 90%;
   margin: auto;
}
.tel .tel_nav {
   width: 100%;
}
.tel .tel_nav ul{
   width: 100%;
   padding-bottom:60px;
}
.tel .tel_nav ul li{
   float:left;
   width: 20%;
   text-align: center;
   margin: 10px 0px;
   border-bottom:none;
   position: relative;
}
.tel .tel_nav ul li a{
   color:rgb(95,92,92);
   padding: 8px 0px;
   font-size:14px;
}
.tel .tel_nav .active  a{
   color:rgb(234, 96, 96);
   padding: 8px 0px;
   border-bottom: 2px solid #fff;
}
.tel .tel_nav .active  a:after{   //重点是用伪类添加下划线
   content: "";
   position: absolute;
   bottom: -8px;
   left: 30%;
   width: 30%;
   height: 2px;
   background: rgb(234, 96, 96);
}

.tel_website{
   width: 100%;
}
.tel_website ul{
   width: 100%;
   padding-bottom:30px;
   overflow: hidden;
   display: none;
}
.tel_website .active{
   display: block;
}
.tel_website ul li{
   width: 50%;
   float: left;
   margin-top:20px;
}
.tel_website ul li a{
   
}
.tel_website ul li a img{
   display: block;
   margin: auto;
   text-align: center;
   width: 70%;
   border:1px solid rgb(247,240,240) ;
   box-shadow: -2px -2px 5px rgb(247,240,240) inset;
}

jQuery代码

$(".tel_nav ul").on("click","li",function () {
    var str2 = $(".tel_website").children();
    $(this).addClass("active").siblings().removeClass("active");
    str2.eq($(this).index()).addClass("active").siblings().removeClass("active");
})

效果图