【锋利的JQuery-学习笔记】Tab选项卡的实现
2020-11-24 07:07
标签：style blog class code java ext 效果图： 关键点：
1.标签和标签内容都是用 2.用js代码实现点击标签时，标签内容的切换（做法是 html： css： js： 【锋利的JQuery-学习笔记】Tab选项卡的实现,搜素材,soscw.com 【锋利的JQuery-学习笔记】Tab选项卡的实现 标签：style blog class code java ext 原文地址：http://www.cnblogs.com/easy5weikai/p/3703822.html
div id="jnBrand">
div id="jnBrandTab">
h2 title="品牌活动">品牌活动h2>
ul>
li>a title="运动" href="#nogo">运动a>li>
li>a title="女鞋" href="#nogo">女鞋a>li>
li>a title="男鞋" href="#nogo">男鞋a>li>
li>a title="Applife" href="#nogo">童鞋a>li>
ul>
div>
div id="jnBrandContent">
div id="jnBrandList">
ul>
li>
a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
span>a href="###1">耐克a>span>
li>
li>
a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
span>a href="###2">阿迪达斯a>span>
li>
li>
a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
span>a href="###3">李宁a>span>
li>
li>
a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
span>a href="###4">安踏a>span>
li>
li>
a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
span>a href="###1">耐克a>span>
li>
li>
a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
span>a href="###2">阿迪达斯a>span>
li>
li>
a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
span>a href="###3">李宁a>span>
li>
li>
a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
span>a href="###4">安踏a>span>
li>
li>
a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
span>a href="###1">耐克a>span>
li>
li>
a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
span>a href="###2">阿迪达斯a>span>
li>
li>
a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
span>a href="###3">李宁a>span>
li>
li>
a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
span>a href="###4">安踏a>span>
li>
li>
a href="###1" class="JS_live">img alt="耐克" src="images/upload/20120217.jpg" />a>
span>a href="###1">耐克a>span>
li>
li>
a href="###2" class="JS_live">img alt="阿迪达斯" src="images/upload/20120218.jpg" />a>
span>a href="###2">阿迪达斯a>span>
li>
li>
a href="###3" class="JS_live">img alt="李宁" src="images/upload/20120219.png" />a>
span>a href="###3">李宁a>span>
li>
li>
a href="###4" class="JS_live">img alt="安踏" src="images/upload/20120220.png" />a>
span>a href="###4">安踏a>span>
li>
ul>
div>
div>
div>
/* 品牌活动 */
#jnBrand {
float: left;
height: 230px;
margin: 10px 0 0;
overflow: hidden;
width: 790px;
}
#jnBrandTab {
border-bottom: 1px solid #E4E4E4;
height: 29px;
position: relative;
width: 790px;
float: left;
}
#jnBrandTab h2 {
height: 29px;
line-height: 29px;
left: 0;
position: absolute;
width: 100px;
}
#jnBrandTab ul {
position: absolute;
right: 0;
top: 10px;
}
#jnBrandTab li {
float: left;
margin: 0 10px 0 0;
}
#jnBrandTab li a {
background-color: #E4E4E4;
color: #000000;
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0 10px;
}
#jnBrandTab .chos {
background: url("../images/chos.gif") no-repeat scroll 50% bottom transparent;
padding-bottom: 3px;
}
#jnBrandTab .chos a {
background-color: #FA5889;
color: #FFFFFF;
outline: 0 none;
}
#jnBrandContent {
float: left;
height: 188px;
overflow: hidden;
margin: 8px 5px;
width: 790px;
position: relative;
}
#jnBrandList {
position: absolute;
left: 0;
top: 0;
width: 3200px;
}
#jnBrandContent li {
float: left;
height: 188px;
overflow: hidden;
padding: 0 5px;
position: relative;
width: 185px;
}
#jnBrandContent li img {
left: 5px;
position: absolute;
top: 0;
}
#jnBrandContent li span {
background-color: #EFEFEF;
bottom: 0;
color: #666666;
display: inline-block;
font-size: 14px;
height: 24px;
line-height: 24px;
overflow: hidden;
position: absolute;
text-align: center;
width: 183px;
}
#jnBrandContent li a {
color:#666666;
}
#jnBrandContent li a:hover{
color: #008CD7;
text-decoration: none;
}
"../images/chos.gif"是：
（下载：
）$(function () {
$("#jnBrandTab li a").click(function () {
$(this).parent().addClass("chos")
.siblings().removeClass("chos");
var index = $("#jnBrandTab li a").index(this);
showBrandContent(index);
return false;
}).eq(0).click();
});
//父标签横向滚动,以显示不同的tab标签页（子标签）
function showBrandContent(index) {
var $rollobj = $("#jnBrandList");
/*
outerWidth(options)
获取第一个匹配元素外部宽度（默认包括补白和边框）。
此方法对可见和隐藏元素均有效。
返回值：Integer
参数：
options(Boolean) : (false) 设置为 true 时，计算边距在内。
示例：
获取第一段落外部宽度。
*/
var rollWith = $rollobj.find("li").outerWidth();
rollWith *= 4; //一个版面的宽度
$rollobj.stop(true, true)//清空所有动画和将未完成的动画抵达动画结束状态
.animate({left: -rollWith * index}，600);
}
文章标题：【锋利的JQuery-学习笔记】Tab选项卡的实现
文章链接：http://soscw.com/index.php/essay/22336.html