tab选项卡可自动播放

效果如图,此代码设计是考虑到tab标签不是文字+背景的模式,默认效果和当前效果都是图片。也就是每个tab标签需要2个样式情况。如果项目只需要文字+背景图的tab标签,可以样式合并,或者略微改下js去掉+(n+1)。

js代码

function tab(classArr, normalClass, hoverClass, contClass, auto){
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
var tabArray = getElementsByClass(classArr),
contArray = getElementsByClass(contClass),
now = 0,
len = tabArray.length;
auto = auto || 'false';
function normal(){
for (var i = 0; i < len; i++){
tabArray[i].className = normalClass + (i+1);
contArray[i].style.display = 'none';
}
}
function show(now){
tabArray[now].className = hoverClass + (now+1);
contArray[now].style.display = 'block';
}
function autoPlay(){
if (now < len){
normal();
show(now);
now += 1;
}else{
now = 0;
normal();
show(now);
}
setTimeout(autoPlay, 2000)
}
if (auto === 'auto'){
autoPlay();
}
for (var i = 0; i < len; i++){(function(i){
tabArray[i].onclick = function(){
normal();
show(i);
now = i;
}
})(i)
}
}
tab('tab', 'li_normal', 'li_hover', 'cont', 'auto');

使用说明:
tab可传进了5个参数,前4个为必须
classArr:这个是选项卡额外加的样式名,用来获取数组,其实无样式内容;
normalClass:是去掉数字号的默认的样式(实际样式名是li_normal1,li_norma2这样依次排序),此参数传li_normal;
hoverClass:是去掉数字号触发的样式(实际样式名是li_hover1,li_hover2这样依次排序),此参数传li_hover;
contClass:是内容的样式类名;样式名可以自己改,传参数对应上即可;
auto:如果需要自动播放tab选项卡,需要加上第5个参数'auto'。

html代码

<ul class="tab_ul">
<li class="tab li_hover1">第一个标签</li>
<li class="tab li_normal2">第二个标签</li>
<li class="tab li_normal3">第三个标签</li>
</ul>
<div class="cont" style="display:block;">第一个标签的内容</div>
<div class="cont">第二个标签的内容</div>
<div class="cont">第三个标签的内容</div>

css代码

div,ul,li{ margin:0; padding:0; font-size:12px;}
.tab_ul
{ width:285px; overflow:hidden;list-style:none;}
.tab_ul li
{ display:inline; float:left; width:93px; height:38px; margin-right:2px; text-indent:-9999px; cursor:pointer;}
.li_normal1
{ background-image:url(../images/tab_normal1.jpg);}
.li_normal2
{ background-image:url(../images/tab_normal2.jpg);}
.li_normal3
{ background-image:url(../images/tab_normal3.jpg);}
.li_hover1
{ background-image:url(../images/tab_hover1.jpg);}
.li_hover2
{ background-image:url(../images/tab_hover2.jpg);}
.li_hover3
{ background-image:url(../images/tab_hover3.jpg);}
.cont
{ display:none; width:281px; height:120px; padding-top:10px; text-indent:10px; font:bold 14px "宋体"; background-color:#ccc; color:#666; border:1px solid #999;}
原文地址:https://www.cnblogs.com/bianyuan/p/2356391.html