兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)

最新推荐文章于 2021-12-27 16:24:22 发布

ouailuo143

最新推荐文章于 2021-12-27 16:24:22 发布

阅读量1k

点赞数

分类专栏： JS 文章标签： safari opera chrome ie class function

本文链接：https://blog.csdn.net/ouailuo143/article/details/6535051

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

#tab_container1{width:670px;text-align:left;}

.cls_tab_nav{height:26px;overflow:hidden;font-size:12px;text-align:left; background:url(images/line_bg.jpg) repeat-x bottom;}

.cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}

.cls_tab_nav_li{ background:url(images/xxk2.gif) no-repeat -120px 0;width:120px;height:26px;line-height:26px;float:right;display:inline;overflow:hidden;text-align:center;cursor:pointer;}

.cls_tab_nav_li_first{background-position:0px 0px;}

.cls_tab_nav_li a{text-decoration:none;color:#555;font-size:12px;}

.cls_tab_body{border:1px solid #FFAE1E;border-top:none;min-height:260px; padding:20px 0;}

.cls_div{display:none;font-size:14px;}

</style>

</head>

<body>

<ul>

<li class="cls_tab_nav_li cls_tab_nav_li_first"><a href="/">源码爱好者最新更新</a></li>

<li class="cls_tab_nav_li"><a href="/sort/list_1_1.shtml">ASP类最新更新</a></li>

<li class="cls_tab_nav_li"><a href="#">C#类最新更新</a></li>

<li class="cls_tab_nav_li"><a href="#">JAVA类最新更新</a></li>

<li class="cls_tab_nav_li"><a href="#">Flash类最新更新</a></li>

</ul>

</div>

<tr>

</tr>

<tr>

<td width="136" align="center">北京市旅游业治安管理信息系统售后服务</td>

<td width="141" align="center">北京市旅游业治安管理信息系统售后服务</td>

<td width="142" align="center">北京市旅游业治安管理信息系统售后服务</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td align="center">北京市旅游业治安管理信息系统售后服务</td>

<td align="center">北京市旅游业治安管理信息系统售后服务</td>

<td align="center">北京市旅游业治安管理信息系统售后服务</td>

</tr>

</table>

</div>

<div class="cls_div">ASP的显示内容</div>

<div class="cls_div">C#的显示内容/</div>

<div class="cls_div">JAVA的显示内容</div>

<div class="cls_div">Flash的显示内容/</div>

</div>

try{

document.execCommand("BackgroundImageCache", false, true);

}catch(e){}

function $(element){

if(arguments.length>1){

for(var i=0,elements=[],length=arguments.length;i<length;i++)

elements.push($(arguments[i]));

return elements;

}

if(typeof element=="string")

return document.getElementById(element);

else

return element;

}

var Class={

create:function(){

return function(){

this.initialize.apply(this,arguments);

}

Object.extend=function(destination,source){

for(var property in source){

destination[property]=source[property];

}

return destination;

}

var tabMenu=Class.create();

tabMenu.prototype={

initialize:function(container,selfOpt,otherOpt){

this.container=$(container);

var selfOptions=Object.extend({fontWeight:"bold",fontSize:"12px",color:"#FFBC44"},selfOpt||{});

var otherOptions=Object.extend({fontWeight:"normal",fontSize:"12px",color:"#666"},otherOpt||{});

//用for循环得到objs数组,主要是为了兼容非IE浏览器把空白也当作子对象

for(var i=0,length=this.container.childNodes.length,objs=[];i<length;i++){

if(this.container.childNodes[i].nodeType==1)

objs.push(this.container.childNodes[i]);

}

var tabArray=objs[0].getElementsByTagName("li");

//用for循环得到divArray数组,主要是为了兼容非IE浏览器把空白也当作子对象

var divArray=new Array();

for(i=0,length=objs[1].childNodes.length;i<length;i++){

if(objs[1].childNodes[i].nodeType==1)

divArray.push(objs[1].childNodes[i]);

}

for(i=0,length=tabArray.length;i<length;i++){

tabArray[i].length=length;

tabArray[i].index=i;

tabArray[i].οnmοuseοver=function(){

//其它选项卡样式设置

for(var j=0;j<this.length;j++){

tabArray[j].style.backgroundPosition="-"+tabArray[j].offsetWidth+"px 0";

for(var property in selfOptions){

tabArray[j].firstChild.style[property]=otherOptions[property];

}

//当前选项卡样式

this.style.backgroundPosition="0 0";

for(var property in selfOptions){

this.firstChild.style[property]=selfOptions[property];

注意this.style.property和selfOptions.property的用法错误

style.fontWeight正确

style["fontWeight"]正确

style["font-weight"]错误

}

//隐藏其它选项卡

for(j=0;j<this.length;j++){

divArray[j].style.display="none";

}

//显示当前选项卡

divArray[this.index].style["display"]="block";

}

var tab1=new tabMenu("tab_container1",{fontSize:"12px",color:"#FFBC44"},{fontWeight:"normal",color:"#666"});

</script>

</body>

</html>

ouailuo143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容性好的TAB选项卡(IE,FF,Opera,Safari,Chrome)

#tab_container1{width:670px;text-align:left;}.cls_tab_nav{height:26px;overflow:hidden;font-size:12px;text-align:left; background:url(images/line_bg.jpg) repeat-x bottom;}.cls_tab_nav
复制链接

扫一扫