选项卡js代码

时间:2013-08-15 22:10:01  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:文章提供这款js(第二电脑网http://www.002pc.com) 选项卡是大家常用到的网页选项卡代码也叫tab选项卡,本款代码非常实用简单,只要你把var slides = ["tab01", "tab02"];下面那代码js(第二电脑网http://www.002pc.com)代码,就可以快速的实现切换效果了。 <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" &quo...
  正文:文章提供这款js(第二电脑网http://www.002pc.com) 选项卡是大家常用到的网页选项卡代码也叫tab选项卡,本款代码非常实用简单,只要你把var slides = ["tab01", "tab02"];下面那代码js(第二电脑网http://www.002pc.com)代码,就可以快速的实现切换效果了。

文章提供这款js(第二电脑网http://www.002pc.com) 选项卡是大家常用到的网页选项卡代码也叫tab选项卡,本款代码非常实用简单,只要你把var slides = ["tab01", "tab02"];下面那代码js(第二电脑网http://www.002pc.com)代码,就可以快速的实现切换效果了。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.zhutiai.com/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>选项卡js(第二电脑网http://www.002pc.com)代码</title>
<script language="网页特效">
function addevent(elem,type,fn){if(elem.nodename==="a"&&type==="click"){elem.setattribute("href","JavaScript:void(0)")};if(elem.addeventlistener){elem.addeventlistener(type,fn,false);return true;}else if(elem.attachevent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);}
elem.attachevent("on"+type,elem[type+fn]);return true;}
return false;};function slide(o){var handle=o.handle,content=o.content,mode=o.mode||"moSEO教程ver",myclass=o.current,speed=o.speed,fn=o.fn,flag=0,past,timer;for(var i=0;i<handle.length;i++){(function(i){addevent(handle[i],mode,function(){cleartimeout(timer);show(i);});})(i);if(handle[i].classname===myclass)past=i;}
function show(flag){var i=flag;handle[past].classname="";content[past].style.display="none";past=flag;handle[i].classname=myclass;content[i].style.display="block";if(handle[i].nodename==="a")handle[i].blur();(flag+1)==handle.length?flag=0:flag++;if(speed){timer=settimeout(function(){show(flag)},speed);addevent(content[i],"mouseover",function(){cleartimeout(timer)});addevent(content[i],"mouseout",function(){cleartimeout(timer);timer=settimeout(function(){show(flag)},speed)});};if(fn)fn();}
if(speed)show(flag);}
</script>
<style>
h2{ margin:0;}
ul{ padding:0; margin:0;}

.tab{ width:400px; margin:30px auto 0; font-size:12px; color:#555; border:1px solid #ccc;}
.tab h2{ width:100%; overflow:hidden; font-size:12px; font-weight:normal; background:#f2f2f2;}
.tab h2 span,
.tab h2 a{ float:left; width:50px; line-height:25px; background:#ddd; border-right:1px solid #ccc; border-bottom:1px solid #ccc; text-align:center; cursor:pointer;}
.tab h2 .current{ background:#fff; font-weight:bold; border-bottom:1px solid #fff;}
.tab ul{ padding:25px;}
</style>
</head>

<body>
<div class="tab" id="tab01">
  <h2>
    <span class="current">标题0</span>
    <span>标题1</span>
    <span>标题2</span>
    <span>标题3</span>
  </h2>
  <ul>滑过显示0</ul>
  <ul style="display:none">滑过显示1</ul>
  <ul style="display:none">滑过显示2</ul>
  <ul style="display:none">滑过显示3</ul>
</div>
<br />
<br />
<br />
<br />


<script>


//切换tab选项卡
var slides = ["tab01", "tab02"];
for(var i=0; i<slides.length; i++){
  var elemtit = document.getelementbyid(slides[i]).getelementsbytagname("h2")[0].getelementsbytagname("span"); "选项卡js代码"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/26539.html


关于《选项卡js代码》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td