<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB标签图片代码 - 酷80</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}.tab{margin-top:100px}#TabCon1{width:212px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}
#TabCon2{width:212px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}.xixi1{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover1.gif);cursor:pointer;}
.xixi2{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);cursor:pointer;}.tab1{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#FFF;}
.tab2{width:116px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer;color:#000;}-->
</style>
</head>
<body style="text-align:center">
<script type="text/javascript">
function setTab03Syn ( i )
{
selectTab03Syn(i);
}
function selectTab03Syn ( i )
{
switch(i){
case 1:
document.getElementById("TabCon1").style.display="block";
document.getElementById("TabCon2").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#000000";
break;
case 2:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="block";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#ffffff";
break;
}
}</script><div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onclick="setTab03Syn(1);document.getElementById('bg').className='xixi1'">标签1</div>
<div id="font2" class="tab2" onclick="setTab03Syn(2);document.getElementById('bg').className='xixi2'">标签2</div>
</div>
<div id="TabCon1">内容1</div>
<div id="TabCon2" style="display:none">内容2</div>
</div>
<p style="text-align:center; clear:both"><a href="http://www.cool80.com/">酷80收集整理</a></p>
</body>
</html>
这种是经过我修改的,但是这个效果不是我想要的,我想要的是两张图片点击选项卡的时候只能够显示一张背景!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB标签图片代码 - 酷80</title>
<style type="text/css">
<!--
body,td{font-size: 12px;}.tab{margin-top:100px}#TabCon1{width:212px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}
#TabCon2{width:212px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}.xixi1{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover1.gif);cursor:pointer;}
.xixi2{width:212px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);cursor:pointer;}.tab1{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#FFF;}
.tab2{width:116px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer;color:#000;}-->
</style>
</head>
<body style="text-align:center">
<script type="text/javascript">
function setTab03Syn ( i )
{
selectTab03Syn(i);
}
function selectTab03Syn ( i )
{
switch(i){
case 1:
document.getElementById("TabCon1").style.display="block";
document.getElementById("TabCon2").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#000000";
break;
case 2:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="block";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#ffffff";
break;
}
}</script><div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onclick="setTab03Syn(1);document.getElementById('bg').className='xixi1'">标签1</div>
<div id="font2" class="tab2" onclick="setTab03Syn(2);document.getElementById('bg').className='xixi2'">标签2</div>
</div>
<div id="TabCon1">内容1</div>
<div id="TabCon2" style="display:none">内容2</div>
</div>
<p style="text-align:center; clear:both"><a href="http://www.cool80.com/">酷80收集整理</a></p>
</body>
</html>
这种是经过我修改的,但是这个效果不是我想要的,我想要的是两张图片点击选项卡的时候只能够显示一张背景!
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>不规则TAB标签图片</title>
<style type="text/css">body{font-size: 12px;}.tab{margin-top:100px}#TabCon1{width:540px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;
}
#TabCon2{width:540px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}
#TabCon3{width:540px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}
#TabCon4{width:540px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}
#TabCon5{width:540px;height:60px;line-height:60px;border:#e6e6e6 1px solid;border-top-width:0;}.xixi1{width:540px;height:29px;line-height:29px;background-image:url(images/news_bghover1.gif);background-repeat:repeat-y;cursor:pointer;}
.xixi2{width:540px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);background-repeat:repeat-y;cursor:pointer;}
.xixi3{width:540px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);background-repeat:repeat-y;cursor:pointer;}
.xixi4{width:540px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);background-repeat:repeat-y;cursor:pointer;}
.xixi5{width:540px;height:29px;line-height:29px;background-image:url(images/news_bghover2.gif);background-repeat:repeat-y;cursor:pointer;}.tab1{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#FFF;}
.tab2{width:116px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer;color:#000;}
.tab3{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#000;}
.tab4{width:116px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer;color:#000;}
.tab5{width:96px;height:29px;line-height:29px;float:left;text-align:center;cursor:pointer; color:#000;}
</style>
</head>
<body style="text-align:center">
<script type="text/javascript">
function setTab03Syn ( i )
{
selectTab03Syn(i);
}
function selectTab03Syn ( i )
{
switch(i){
case 1:
document.getElementById("TabCon1").style.display="block";
document.getElementById("TabCon2").style.display="none";
document.getElementById("TabCon3").style.display="none";
document.getElementById("TabCon4").style.display="none";
document.getElementById("TabCon5").style.display="none";
document.getElementById("font1").style.color="#ffffff";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#000000";
document.getElementById("font4").style.color="#000000";
document.getElementById("font5").style.color="#000000";
break;
case 2:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="block";
document.getElementById("TabCon3").style.display="none";
document.getElementById("TabCon4").style.display="none";
document.getElementById("TabCon5").style.display="none";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#ffffff";
document.getElementById("font3").style.color="#000000";
document.getElementById("font4").style.color="#000000";
document.getElementById("font5").style.color="#000000";
break;
case 3:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="none";
document.getElementById("TabCon3").style.display="block";
document.getElementById("TabCon4").style.display="none";
document.getElementById("TabCon5").style.display="none";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#ffffff";
document.getElementById("font4").style.color="#000000";
document.getElementById("font5").style.color="#000000";
break;
case 4:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="none";
document.getElementById("TabCon3").style.display="none";
document.getElementById("TabCon4").style.display="block";
document.getElementById("TabCon5").style.display="none";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#000000";
document.getElementById("font4").style.color="#ffffff";
document.getElementById("font5").style.color="#000000";
break;
case 5:
document.getElementById("TabCon1").style.display="none";
document.getElementById("TabCon2").style.display="none";
document.getElementById("TabCon3").style.display="none";
document.getElementById("TabCon4").style.display="none";
document.getElementById("TabCon5").style.display="block";
document.getElementById("font1").style.color="#000000";
document.getElementById("font2").style.color="#000000";
document.getElementById("font3").style.color="#000000";
document.getElementById("font4").style.color="#000000";
document.getElementById("font5").style.color="#ffffff";
break;
}
}</script><div class="tab">
<div id="bg" class="xixi1">
<div id="font1" class="tab1" onClick="setTab03Syn(1);document.getElementById('bg').className='xixi1'">标签1</div>
<div id="font2" class="tab2" onClick="setTab03Syn(2);document.getElementById('bg').className='xixi2'">标签2</div>
<div id="font3" class="tab3" onClick="setTab03Syn(3);document.getElementById('bg').className='xixi3'">标签3</div>
<div id="font4" class="tab4" onClick="setTab03Syn(4);document.getElementById('bg').className='xixi4'">标签4</div>
<div id="font5" class="tab5" onClick="setTab03Syn(5);document.getElementById('bg').className='xixi5'">标签5</div>
</div>
<div id="TabCon1">内容1</div>
<div id="TabCon2" style="display:none">内容2</div>
<div id="TabCon3" style="display:none">内容3</div>
<div id="TabCon4" style="display:none">内容4</div>
<div id="TabCon5" style="display:none">内容5</div>
</div>
</body>
</html>
此代码是本人写的!出现了问题!请多多指教!谢谢!这是点击的第一个选项卡效果!这是点击的第二个选项卡效果!之后的效果都和第二个效果一样!谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>选项卡</title>
<style type="text/css">
*{margin:0px;padiving:0px;}
body{ padiving:0;font:12px "宋体"; height:100%; width:100%; }
ul,li{ list-style-type:none;padding:0px;}
.tabHeads{width:962px;height:31px;margin:100px auto 0px;background-color:#31E2B7; }
.tabContents{width:960px;height:auto;margin:0px auto; border:1px solid #333;padding:0px; }
.tabContents div{height:198px;line-height:25px;width:auto;padding:5px;overflow:auto;background-color:#eff;}
.tabs{width:100px;height:25px;line-height:25px;margin:5px 2px 0px;border:1px solid #333;border-BOTTOM:none;text-align:center;display:inline;float:left;}
.curTab{color:red;background-color:#eff; MARGIN-BOTTOM: -2px; POSITION: relative; height:26px;}
</style>
</head>
<body>
<div class="tabHeads" id='tabHeads'>
<ul>
<li style="margin-left:50px;">新闻1</li>
<li >新闻2</li>
<li >新闻3</li>
<li >新闻4</li>
<li >新闻5</li>
<li >新闻6</li>
</ul>
</div>
<div id="tabContents" class="tabContents">
<div >
<textarea rows=3 cols="20"></textarea>新闻1
</div>
<div style="display:none;">
<textarea rows=3 cols="20">234656</textarea>新闻2a2
</div>
<div style="display:none;" >
<textarea rows=3 cols="20"></textarea>新闻3a3
</div>
<div style="display:none;">
<textarea rows=3 cols="20"></textarea>新闻4
</div>
<div style="display:none;">
<textarea rows=3 cols="20">234656</textarea>新闻5
</div>
<div style="display:none;">
<textarea rows=3 cols="20"></textarea>新闻6
</div>
</div>
<div class="tabHeads" id='tabHeads1'>
<ul>
<li style="margin-left:50px;">新闻1</li>
<li >新sdfgsdfg闻2</li>
<li >新闻3</li>
<li >新sdfg闻4</li>
<li >新sdfgs闻5</li>
<li >新sdfg闻6</li>
</ul>
</div>
<div id="tabContents1" class="tabContents">
<div >
<textarea rows=3 cols="20"></textarea>新闻1
</div>
<div style="display:none;">
<textarea rows=3 cols="20">234656</textarea>新闻2a2
</div>
<div style="display:none;">
<textarea rows=3 cols="20"></textarea>新闻3a3
</div>
<div style="display:none;">
<textarea rows=3 cols="20"></textarea>新闻4
</div>
<div style="display:none;">
<textarea rows=3 cols="20">234656</textarea>新闻5
</div>
<div style="display:none;" >
<textarea rows=3 cols="20"></textarea>新闻6
</div>
</div></body>
<script type="text/javascript"></script>
<script type="text/javascript">
if(typeof(HTMLElement) != "undefined") // 给非IE 浏览器添加方法 contains
{
HTMLElement.prototype.contains = function(obj)
{
while(obj != null && typeof(obj.tagName) != "undefined")
{
if(obj == this)
return true;
obj = obj.parentNode;
}
return false;
};
} var $ = function (id,obj) {
return 'string' == typeof(id) ? (obj||document).getElementById(id) : id;
};
var $$ = function (name,obj) {
return 'string' == typeof(name) ? (obj||document).getElementsByTagName(name):name;
}; //选项卡类,头,内容,选中的索引,选中样式,默认样式,是否自动切换,切换时间间隔(毫秒)
function Tab(heads,contents,selectedIndex,curStyle,style,isAutoChange,space)
{
if(heads && contents && heads.length && contents.length && heads.length==contents.length)
{
this.heads=heads;
this.contents=contents;
}else
{
alert("参数错误!");
return;
}
this.selectedIndex = selectedIndex||0;
this.curStyle=curStyle||"";
this.style = style||"";
this.isAutoChange=isAutoChange||false;
this.space = space || 3000;
this.timer=null;
this.init();
}Tab.prototype.init=function()
{
var obj = this;
for(var i=0;i<obj.heads.length;i++)
{
obj.heads[i].index=i;
obj.heads[i].onmouseover=function(){obj.setTab(this.index);if(obj.isAutoChange){clearInterval(obj.timer);}};
if(obj.isAutoChange)
{
obj.contents[i].onmouseout=obj.heads[i].onmouseout=function(e){
e = e||event;
e = e.toElement || e.relatedTarget ; // IE toElement FF:relatedTarget
if(typeof(e)!="undefined" &&!this.contains(e)){clearInterval(obj.timer);obj.timer=setInterval(function(){obj.setTab(obj.selectedIndex=(++obj.selectedIndex)%obj.heads.length);},obj.space);}
}; obj.contents[i].onmouseover=function(e){clearInterval(obj.timer);};
}
}
if(obj.isAutoChange){obj.timer=setInterval(function(){obj.setTab(obj.selectedIndex=(++obj.selectedIndex)%obj.heads.length);},obj.space);}
obj.setTab( obj.selectedIndex);
}
Tab.prototype.setTab=function(index)
{
for(var i=0;i<this.heads.length;i++)
{
this.heads[i].className = i == index ? this.style+' '+this.curStyle :this.style;
this.contents[i].style.display = i == index ? "block" : "none";
}
this.selectedIndex = index;
}
window.onload=function()
{
var heads = $("tabHeads");
var contents=$("tabContents");
var tab1=new Tab($$('li',heads),getChilds(contents),0,'curTab','tabs'); var heads1 = $("tabHeads1");
var contents1=$("tabContents1");
var tab2=new Tab($$('li',heads1),getChilds(contents1),1,'curTab','tabs',true,1500);
};function getChilds(o)
{
if(!o || !o.childNodes)return null;
var r=[];
for(var i=0;i<o.childNodes.length;i++){
if(o.childNodes[i].tagName){r.push(o.childNodes[i]);}
}
return r;
}</script></html>