jQuery tab选项卡产品列表切换代码
jQuery tab选项卡产品列表切换
html:
<div style="height: 40px"></div> <div class="container"> <div class="price"> <h2>产品定价</h2> <div class="category"> <ul> <li class="active">热门</li> <li>计算</li> <li>存储</li> <li>视频服务</li> <li>数据库</li> <li>网络</li> <li>CDN与加速</li> <li>互联网中间件</li> <li>域名服务</li> <li>游戏服务</li> <li>通信服务</li> <li>安全</li> <li>人工智能</li> <li>语音服务</li> <li>移动服务</li> <li>数据处理</li> <li>应用服务</li> </ul> <a href="javascript:;" class="prev"><span></span></a> <a href="javascript:;" class="next"><span></span></a> </div> <div class="cont active"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">云服务器</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">云数据库 MySQL</h3> <p class="desc">一体化多维度监控，高效管理海量数据库</p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">对象存储 COS</h3> <p class="desc">可靠、安全、易用的可扩展文件存储</p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">内容分发网络 CDN</h3> <p class="desc">多借点全网覆盖、安全稳定的内容加速服务</p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">BGP高防</h3> <p class="desc"> 高达300G的防护服务和多达21线的BGP线路抵御DDoS攻击 </p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">云解析</h3> <p class="desc"> 向全网域名提供稳定、安全、快速的智能解析服务 </p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">万象优图</h3> <p class="desc">高效图片处理、全面的图片鉴定和识别服务</p> </div> </a> </li> <li> <a href="#"> <div class="cont_main"> <h3 class="title">直播</h3> <p class="desc">专业稳定快速的直播接入和分发服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">计算</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">存储</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">视频服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">数据库</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">网络</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">CDN与加速</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">互联网中间件</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">域名服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">游戏服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">通信服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">安全</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">人工智能</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">语音服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">移动服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">数据处理</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> <div class="cont"> <ul> <li> <a href="#"> <div class="cont_main"> <h3 class="title">应用服务</h3> <p class="desc">稳定安全，高易用可弹性伸缩的计算服务</p> </div> </a> </li> </ul> </div> </div> </div>
css:
*{
margin: 0;
padding: 0;
font-size: 14px;
font-family: "microsoft yahei";
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.container{
background: #f7f8fa;
height: auto;
overflow: hidden;
padding-top: 60px;
padding-bottom: 80px;
}
.price{
width: 1200px;
margin: 0 auto;
}
.price h2{
font-size: 24px;
color: #333;
line-height: 1;
font-weight: 400;
padding-bottom: 10px;
padding-left: 10px;
}
.price .category{
width: 1180px;
overflow: hidden;
position: relative;
overflow: hidden;
margin-bottom: 20px;
margin-left: 10px;
}
.price .category:after{
content: "";
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 1px;
background-color: #EDEDED;
z-index: 2;
}
.price .category:before{
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 0;
height: 1px;
background-color: #EDEDED;
z-index: 2;
}
.price .category a:after{
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.price .category .prev{
display: none;
position: absolute;
top: 0;
width: 59px;
height: 100%;
box-shadow: 0 0 3px #c6c6c7;
background: #fff;
text-align: center;
font-size: 0;
left: 0;
border-right: 1px solid #e1e3e6;
}
.price .category .prev span{
display: inline-block;
vertical-align: middle;
width: 9px;
height: 14px;
background-repeat: no-repeat;
background-image: url(../images/arrow.svg);
background-position: 96.77% 25%;
background-size: initial;
}
.price .category .next span{
display: inline-block;
vertical-align: middle;
width: 9px;
height: 14px;
background-repeat: no-repeat;
background-image: url(../images/arrow.svg);
background-position: 61.29% 25%;
background-size: initial;
}
.price .category .next{
position: absolute;
top: 0;
width: 59px;
height: 100%;
box-shadow: 0 0 3px #c6c6c7;
background: #fff;
text-align: center;
font-size: 0;
right: 0;
border-left: 1px solid #e1e3e6;
}
.price .category ul li{
display: table-cell;
white-space: nowrap;
font-size: 14px;
text-align: center;
border-bottom: 3px solid transparent;
cursor: pointer;
position: relative;
padding: 18px 25px;
}
.price .category ul li.active{
border-bottom-color: #00a4ff;
color: #00a4ff;
}
.price .cont{
display: none;
}
.price .cont.active{
display: block;
}
.price .cont ul li{
width: 280px;
float: left;
margin: 0 10px;
box-sizing: border-box;
}
.price .cont ul li:nth-child(4n){
margin-right: 0px!important;
}
.price .cont ul li a{
display: block;
border: 1px solid #E5E5E5;
background-color: #fff;
margin-top: 20px;
padding: 13px 20px 15px;
}
.price .cont ul li a:hover{
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, .1);
border-color: rgba(229, 229, 229, .73);
}
.price .cont ul li a:hover .cont_main h3.title{
color: #00a4ff;
}
.price .cont ul li a .cont_main{
display: table-cell;
vertical-align: top;
}
.price .cont ul li a .cont_main h3.title{
font-size: 18px;
font-weight: 400;
color: #333;
line-height: 32px;
white-space: nowrap;
overflow: hidden;
display: block;
text-overflow: ellipsis;
}
.price .cont ul li a .cont_main p.desc{
font-size: 14px;
line-height: 1.5;
color: #666;
height: 42px;
margin-top: -2px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}jquery:
<script src="statics/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//选项卡切换
$(".category ul li").click(function () {
indexC = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".cont")
.eq(indexC)
.addClass("active")
.siblings()
.removeClass("active");
});
//按钮箭头
var catew = $(".category").width() - 150;
var cateLiw = 0;
$(".category ul li").each(function () {
cateLiw += $(this).outerWidth();
});
var i = 0;
$(".next").click(function () {
$(".category ul").animate(
{
"margin-left": -catew + "px",
},
500
);
i++;
if ((catew + 150) * i + (catew + 150) >= cateLiw) {
$(".prev").show();
$(".next").hide();
}
});
$(".prev").click(function () {
$(".category ul").animate(
{
"margin-left": 0 + "px",
},
500
);
$(this).hide();
$(".next").show();
});
});
</script>
还没有留言，还不快点抢沙发？