js多个tab切换简单不需要在body内添加事件 -

charrys

浏览: 36161 次
性别:
来自: 广州

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

js多个tab切换简单不需要在body内添加事件

博客分类：

影视 HTML JavaScript

注意的是a的里面的rel属性window.onload事件！在一个页面可以添加多个这样的效果，只需要在 onload事件添加就可以了。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<mce:style><!--
 *{margin:0;padding:0;}
 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
 *html .clearfix{height:1%;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;}  
 .clearfix {display:block;} 
 ul{margin:10px 10px 0;}
 ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
 ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
 ul li .crent{background:#fff;color:#f60;}
 p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}
--></mce:style><style mce_bogus="1"> *{margin:0;padding:0;}
 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} 
 *html .clearfix{height:1%;}
 *+html .clearfix{height:1%;}
 .clearfix{display:inline-block;}  
 .clearfix {display:block;} 
 ul{margin:10px 10px 0;}
 ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom}
 ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;}
 ul li .crent{background:#fff;color:#f60;}
 p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}</style>
<title>Example</title>
<mce:script type="text/javascript"><!--
function $(objID){    
    return "string" == typeof(objID) ? document.getElementById(objID) : objID;
    }
function addEvt(tab,ct){
    var ctab = $(tab).getElementsByTagName("a");
 var cdiv = $(ct).getElementsByTagName("p");
    for(var i = 0;i<ctab.length;i++)
    { 
        ctab[i].onclick =function std(){   
   for(var i = 0;i<ctab.length;i++){
    if(i!=parseInt(this.rel-1))
    {
     ctab[i].className="";
     cdiv[i].style.display="none";     
    }
   }
   ctab[parseInt(this.rel)-1].className="crent";
   cdiv[parseInt(this.rel)-1].style.display="block";
        }
    }
}
window.onload=function(){
addEvt("tab","ct");
addEvt("tab2","ct2");
}
// --></mce:script>
</head>
<body>
<div id="all1">
  <ul class="ul_bigspace" id="tab">
    <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct">
    <p style="display:block;" mce_style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
  <br>
  <ul class="ul_bigspace" id="tab2">
    <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li>
  </ul>
  <div id="ct2">
    <p style="display:block;" mce_style="display:block;">1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
  </div>
</div>
</body>
</html>

可直接在http://www.ok22.org/art_detail.aspx?id=64 运行查看效果

分享到：

js多Tab自动切换,带完善的鼠标事件 | js文字上下滚动+左右滚动兼容FF/IE

2011-02-15 17:20
浏览 1333
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js多个tab切换简单不需要在body内添加事件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js多个tab切换简单不需要在body内添加事件

评论

发表评论

相关推荐

我的json获取数据实例，直接运行就可以看到了

ckeditor 编辑器+finder配置上传功能

kindeditor/ckeditor 编辑器加+图片自动上传成功（源码下载)

js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)

js遮罩层

js多Tab自动切换,带完善的鼠标事件

js文字上下滚动+左右滚动兼容FF/IE

前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态

清空数组的两种方式

js时间倒计时

JS可以控制样式的名称写法

js给C#控件赋值

iframe里面的页面调用父窗口,左右窗口js函数的方法

关于图片延迟加载技术-ImageLazyLoad

js判断父页存在

最近访客更多访客>>