下载文档原格式
js之选项卡（tag标签）⽬标效果：点击不同按钮显⽰不同内容代码如下<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>input{background-color: white}.click{background-color: darkcyan}div{width: 200px;height: 200px;background-color: antiquewhite;display: none}</style><script type="text/javascript">window.onload=function (){var ainput = document.getElementsByTagName('input');//获取所有input标签var adiv = document.getElementsByTagName('div');//获取所有div标签var i = 0for (i=0;i<ainput.length;i++){ainput[i].index = iainput[i].onclick=function ()//循环点击input标签{for(i=0;i<ainput.length;i++)//循环清除input标签和div标签样式某些属性{ainput[i].className='';adiv[i].style.display='none';}// alert('点击'+this.index+'个按钮');adiv[this.index].style.display='block';//当前input所对应的显⽰divthis.className='click';}}}</script></head><body><input type="button" value="1"><input type="button" value="2"><div>000</div><div>111</div></body></html>。
JS实现图⽂并茂的tab选项卡效果⽰例【附demo源码下载】本⽂实例讲述了JS实现图⽂并茂的tab选项卡效果。
分享给⼤家供⼤家参考，具体如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta charset="UTF-8"><title>JS打造的⼀个图⽂并茂的选项卡代码</title><script type="text/javascript"><!--//--><![CDATA[//><!--//为选项卡的默认值进⾏设定，⽅法为读取cardBar⾥⾯的li标签是否已经有selected属性，如果没有则使⽤默认值。
function loadTab(){//读取cardBar下⾯所有li标签var getId=document.getElementById("cardBar").getElementsByTagName("li");//定义⼀个判断是否有selected的变量var selectedItems=0;//判断⽅法，循环读出li标签的className，如果有则selectedItems加1for(i=0;i<getId.length;i++){if (getId[i].className == "Selected"){selectedItems+=1;}}//经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的classNameif (selectedItems==0){document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";document.getElementById("Dcard1").style.display="block";}}//让窗⼝打开就运⾏他window.onload=loadTab;//设定结束//进⾏选项卡效果的触发function switchTab(cardBar,cardId){//读取cardBar下⾯所有li标签var oItems = document.getElementById(cardBar).getElementsByTagName("li");//循环清空li标签下⾯的selected效果for (i=0;i<oItems.length;i++ ){var x=oItems[i];x.className="";var y=x.getElementsByTagName("a");y[0].style.color="#333";}//开始选项卡效果的赋值，为选中的li标签增加selected类的属性document.getElementById(cardId).className="Selected";//读出cardContent 下⾯的所有div标签var dvs=document.getElementById("cardContent").getElementsByTagName("div");//循环，判断应该显⽰的divfor (i=0;i<dvs.length;i++ ){if (dvs[i].id==("D"+cardId)){dvs[i].style.display="block";}else{dvs[i].style.display="none";}}}//--><!]]></script><style type="text/css"><!--/*--><![CDATA[/*><!--*/body {margin:0 auto;padding:0;font:62.5%/2em "MingLiu" Arial;text-align:center;}img, a img {border:0;display:block;}.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix {display:inline-block;}/* Hides from IE-mac \*/* html .clearfix {height:1%;}.clearfix {display:block;}/* End hide from IE-mac */.tab {width:50%;margin:0 auto;}.nav, .nav li a, .hackBox {list-style:none;border:1px solid #ccc;}.nav {position:relative;margin:1em 0 0;border-width:0 0 1px;}.nav li {float:left;margin:0 .3em;}.nav li a {position:relative;display:block;float:left;margin:0 0 -1px;padding:0 .8em;background:#eee;color:#666;font-size:1.1em;line-height:1.8em;text-decoration:none;}/*- .nav li a:hover, -*/ .nav li.Selected a {border-bottom-color:#fff;background:#fff;color:#000;line-height:2em;}/*对点击下栏显⽰边框的代码进⾏美化*/.hackBox {display:none;padding:1em 0 0;border-width:0 1px 1px;}.hackBox p {margin:0 1em 1em;color:#333;font-size:1.1em;text-align:left;}.hackBox img {float:left;width:100px;margin:0 .8em .4em 0;}/*]]>*/--></style></head><body><div class="tab"><ul class="nav clearfix" id="cardBar"><li id="card1"><a href="#" title="" onclick="javascript:switchTab('cardBar','card1');">⽣死的轮回</a></li><li id="card2"><a href="#" title="" onclick="javascript:switchTab('cardBar','card2');">逝去的吉他</a></li><li id="card3"><a href="#" title="" onclick="javascript:switchTab('cardBar','card3');">解读黄家驹</a></li><li id="card4"><a href="#" title="" onclick="javascript:switchTab('cardBar','card4');">谁伴我闯荡</a></li><li id="card5"><a href="#" title="" onclick="javascript:switchTab('cardBar','card5');">骄阳岁⽉</a></li><li id="card6"><a href="#" title="" onclick="javascript:switchTab('cardBar','card6');">吉他低泣时</a></li></ul><div id="cardContent"><div id="Dcard1" class="hackBox"><p><img src="images/165.jpg" alt="" />主流⾳乐对他来说，不过是⼩菜⼀碟的⽜⼑⼩试，但⼀样做得出⾊，⽽更多才华没来得及表现就被区区三⽶距离断送了。
css+js实现选项卡一、项目简介本次项目课是利用css+js实现选项卡。
二、涉及知识点本次项目课涉及到html、css、js这些方面的知识。
三、效果截图四、源代码下载$ git clone https:///shiyanlou/Tabs.git五、项目实战1.编写布局<!doctype html><html lang="zh"><head><meta charset="UTF-8"><title>tabs</title></head><body><ul><li id="tab1">Tab1</li><li id="tab2">Tab2</li><li id="tab3">Tab3</li></ul><p id="p1">Welcome to ShiYanLou!</p><p id="p2">ShiYanLou is good!</p><p id="p3">Good good study, Day day up!</p></body></html>第一步做完仅仅是完成布局，三个<li>元素对应三个选项，三个p元素跟选项所对应，效果如下图。
2.添加样式上面一步完成了布局，这一步将添加样式，让页面看起来有选项卡的效果。
首先要让ul元素看起来像是一组选项，可以通过添加下面样式实现：/* 调整字体 */* {font-family: Tahoma;font-size: 14px;}/* 去掉li前面的三个小圆点 */ul{list-style: none;margin: 0;padding: 0;}/* 让li元素显示在一行，把触碰到li时的光标显示为手的样式 */li{display: inline;cursor: pointer;}/* 设定第一个li的背景色 */li:first-child{background-color: #3cf;}/* 设定第二个li以及之后的背景色 */li:nth-child(n + 2) {background-color: #3c9;}/* 设定p元素的默认样式 */p{position: relative;top: -1px;margin: 0;width: 300px;height: 300px;background-color: #3cc;}/* 把第二个p以及之后的元素隐藏 */p:nth-child(n + 3) {display: none;}做完这步就有了选项卡的效果，但是当触碰到其他的选项时，选项卡的内容并不会改变。
如何利⽤JS实现CSS中的HOVER效果以及选项卡的制作在CSS中hover是指⿏标移⼊和移出两个事件，利⽤CSS实现这个效果⾮常的简单，可是如果放在JS中，我们就必须解析成两个事件：onmouseover和onmouseout。
做起来的话相对于CSS略显复杂，这⾥我便分享⼀下我利⽤JS实现此效果的过程，这是我在制作选项卡时⽤到的，因此⼤家也可以看看选项卡是怎么制作的。
⾸先在HTML中设置三个input按钮和三个div(选项卡的内容)：代码如下：<head lang="en"><meta charset="UTF-8"><title></title><style>input{background: white;}.yellow{background: yellow}div{width:200px;height:200px;background: red;display: none}</style></head><body><input class="white" type="button" value="1"/><input type="button" value="2"/><input type="button" value="3"/><div style="display: block">111</div><div>222</div><div>333</div></body>此时你会发现页⾯上有三个按钮的⼀个DIV，我们就是利⽤选中⼀个按钮，⼀个div的display变为block,其他的变成none来实现的。
JS实现滑动菜单效果代码（包括Tab,选项卡,横向等效果）本⽂实例讲述了JS实现滑动菜单效果代码。
分享给⼤家供⼤家参考。
具体如下：这⾥实现⼀个特效将⽹页中的选项卡滑动门都集中到⼀个⽹页中来，有些同志曾经为同⼀个页⾯布置两个滑动门⽽烦恼，参考⼀下本例⼦，相信你会找到答案，⽽且有各种排列⽅式的选项卡，总有⼀款会满⾜你。
运⾏效果截图如下：在线演⽰地址如下：具体代码如下：12345678910 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml"lang="zh-CN"xml:lang="zh-CN"><head><title>选项卡</title><style type="text/css"><!--* { margin:0; padding:0; font-size:12px; font-weight:normal; }.jj { font-weight:bolder!important; }.box { border-top-color:#c00!important; }.pr { color:#060!important; }#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; }#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid1px #fff; text-align:center; background:#fff; cursor:pointer; }#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; }#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; } #tab01 div.up { display:block; }#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; }#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; }#tab02 h4.up { color:#c00; }#tab02 ol { display:none; height:54px; padding:5px; color:#666; }#tab02 ol.up { display:block; }#tab03 { position:relative; width:100px; margin:50px; }#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; }#tab03 h3.up { z-index:3; color:#c00; background:#fff; }#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; }#tab03 div.tab.up { display:block; }--></style></head><body><div id="tab01"><h3>⾸页</h3><div class="jj"><p>嘿嘿，⽆视div原始class值。
JS+CSS简洁的滑动门选项卡菜单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><title>JS+CSS简洁的滑动门/选项卡菜单丨芯晴网页特效丨</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">ul,li{margin:0;padding:0;}.tabBox{width:268px;margin:20px;}ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;} ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;} .tabCon{border:1px solid #000;border-top:none;background:#fff;}.tCon{display:none;background:#eee;padding:25px;}</style><script type="text/javascript">/*Author: wubai，QQ:464216089，By: 2012.4.7*/function tabMenu(tabBox,navClass){vartabNavLi=document.getElementById(tabBox).getElementsByTag Name("ul")[0].getElementsByTagName("li");vartabCon=document.getElementById(tabBox).getElementsByTagN ame("div")[0].getElementsByTagName("div");var tabLens=tabCon.length;for(var i=0;i<tabLens;i++){//应用js闭包传入参数i作为当前索引值赋值给m(function(m){tabNavLi[m].onmouseover = function(){for(var j=0; j<tabLens; j++){tabNavLi[j].className = (j==m)?navClass:"";tabCon[j].style.display = (j==m)?"block":"";}}})(i);}}//函数调用window.onload=function(){tabMenu("tabBox1","active");tabMenu("tabBox2","active");}</script></head><body><!--demo1--><div id="tabBox1" class="tabBox"><ul class="tabTag"><li class="active">新闻1</li><li>体育1</li><li>财经1</li></ul><div class="tabCon"><div class="tCon" style="display:block">新闻1内容</div> <div class="tCon">体育1内容</div><div class="tCon">财经1内容</div></div></div><!--demo2--><div id="tabBox2" class="tabBox"><ul class="tabTag"><li class="active">新闻2</li><li>体育2</li><li>财经2</li></ul><div class="tabCon"><div class="tCon" style="display:block">新闻2内容</div> <div class="tCon">体育2内容</div><div class="tCon">财经2内容</div></div></div></body></html><br><br><hr><p align="center"><font color=black>本特效由<a href="" target="_blank">芯晴网页特效</a>丨 收集于互联网，只为兴趣与学习交流，不作商业用途。
JQuery Tab 选项卡特点：超简洁代码，可以无限扩展选项卡的个数。
缺点：不兼容IE6，其它浏览器兼容良好。
必须包含jquery文件：<script type="text/javascript" src="https:///ajax/libs/jquery/1.7.1/jquery.min.js"></script>Css code：<style type="text/css">div,ul,li,img,table,h1,h3,p,form{margin:0;padding:0;float:none;border:0;LIST-STYLE-TYPE:none;} body{font-size:13px; margin:0; color:#b4742c; font-family:microsoft YaHei,Arial, Helvetica, sans-serif; width:740px;}a{ color:#b4742c; text-decoration:none;}#nav{width:732px; height:auto; float:left;border:#dd9a3a solid 1px; margin:12px 0 0 8px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;}#nav ul{ display:inline;}#nav li{height:26px; line-height:26px; margin:5px; text-indent:8px; width:12%; float:left; text-align:center;}#nav li a{ display:block;}#nav li a:hover{ background:#EEE;}#nav .active a,#nav .active a:hover{ color:#000;background:#f6b043}#cont{ width:732px; height:auto; float:left;border:#dd9a3a solid 1px; margin:12px 0 0 8px;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;color:#000; display:none;} }</style>JS code：<script type="text/javascript" language="javascript">$(document).ready(function(){$("#nav li").click(function(){ //click也可以换成其它的动作。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>TAB样式</title></head><style type="text/css">#head{width:400px;height:30px;}#head ul{padding:0; margin:0;}#head ul li{ list-style:none; float:left; text-decoration:none; display:block;width:80px;padding:5px; margin:0px 10px 0px 0px; position:relative;}#head ul li a{ text-decoration:none; color:#000000;}#head ul li a:visited{ text-decoration:none; color:#000000;}#L1{background-color:#9CC;border-top-color: #F6C;border-right-color: #F6C;border-left-color: #F6C;}#L2{background-color:#CC9;border-color:#309;margin-left:1px;}#L3{background-color:#FF3;border-color:#360;}#L4{background-color:#690;border-color:#360;}#d1{background-color:#9CC;border:1px solid #C39;width:400px;height:220px;margin-top:0px;position:absolute;z-index:1;}#d2{background-color:#CC9;border:1px solid #309;display:none;width:400px;height:220px;margin-top:0px;position:absolute;z-index:1;}#d3{background-color:#FF3;border:1px solid #360;display:none;width:400px;height:220px;margin-top:0px;position:absolute;z-index:1;}#d4{background-color:#690;border:1px solid #360;display:none;width:400px;position:absolute;height:220px;margin-top:0px;z-index:1;}</style><script language="javascript">function Tab(num){var i;for(i=1;i<=4;i++){if(i==num)document.getElementById("d"+i).style.display="block";elsedocument.getElementById("d"+i).style.display="none";}}</script><body><div id="head"><ul><li id="L1" onclick="Tab(1)"><a href="#">公告信息</a></li><li id="L2" onclick="Tab(2)"><a href="#">今日热点</a></li><li id="L3" onclick="Tab(3)"><a href="#">最新新闻</a></li><li id="L4" onclick="Tab(4)"><a href="#">考试信息</a></li></ul></div><div id="d1"><ul><li>这里是最新公告信息</li><li>这里是最新公告信息</li><li>这里是最新公告信息</li><li>这里是最新公告信息</li></ul></div><div id="d2"><ul><li>这里是今日热点</li><li>这里是今日热点</li><li>这里是今日热点</li><li>这里是今日热点</li></ul></div><div id="d3"><ul><li>这里是最新新闻</li><li>这里是最新新闻</li><li>这里是最新新闻</li><li>这里是最新新闻</li></ul></div><div id="d4"><ul><li>这里是考试信息</li><li>这里是考试信息</li><li>这里是考试信息</li><li>这里是考试信息</li></ul></div> </body> </html>。
JS实现不规则TAB选项卡效果代码本⽂实例讲述了JS实现不规则TAB选项卡效果代码。
分享给⼤家供⼤家参考。
具体如下：这是⼀款不规则TAB选项卡效果，将中规中矩的⽅⾓换成了不规则的圆⾓，也就是这⼀换，倒让浏览者新鲜了不少，也使选项卡增多了⼏份灵感，不是吗？运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>不规则TAB选项卡效果</title><style type="text/css"><!--body,td{font-size: 12px;}.tab{margin-top:100px}#TabCon1{width:212px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;} #TabCon2{width:212px;height:100px;line-height:100px;border-left:#757575 1px solid;border-bottom:#757575 1px solid;border-right:#757575 1px solid;} .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" onMouseOver="setTab03Syn(1);document.getElementById('bg').className='xixi1'">新闻标签</div><div id="font2" class="tab2" onMouseOver="setTab03Syn(2);document.getElementById('bg').className='xixi2'">新闻标签</div></div><div id="TabCon1">不规则TAB选项卡效果</div><div id="TabCon2" style="display:none">不规则TAB选项卡效果2</div></div></body></html>希望本⽂所述对⼤家的JavaScript程序设计有所帮助。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>myFocus-tab 各种功能的选项卡切换</title><style type="text/css">* { margin:0; padding:0; border:0; list-style:none; }body { background:#fff; padding:20px; font:1em Verdana, Geneva,sans-serif; }.box { float:left; margin-right:20px; }.box h4 { color:#c00; line-height:30px; font-size:12px; }.tip { border:1px solid #dedede; margin-top:20px; }.tip p { height:30px; line-height:30px; padding-left:16px; background:#f1f1f1; }.tip pre { background:##AFF8AB; }.tip2 { font-size:12px; color:#888; margin-top:16px; }.mF_tab { width:426px; height:90px; margin-left:16px; }.mF_tab .btn { position:absolute; top:0; left:0; z-index:2; }.mF_tab .btn li { float:left; width:80px; height:26px; line-height:26px; text-align:center; margin-right:2px; border:1px solid #dedede;border-bottom:0; cursor:pointer; background:#f1f1f1; }.mF_tab .btn li.current { height:27px; background:#fff; }.mF_tab .cont { position:absolute; top:27px; left:0; border:1px solid #dedede; overflow:hidden; }.mF_tab .cont .swt { position:absolute; left:0; top:0; }.mF_tab .cont .swt li p { padding:16px; }</style><script type="text/javascript">var myFocus={$:function(id){return document.getElementById(id);},$$:function(tag,obj){return (typeofobj=='object'?obj:this.$(obj)).getElementsByTagName(tag);},$$_:function(tag,obj){var arr=[],n=0,a=obj.getElementsByTagName(tag);for(var i=0;i<a.length;i++){arr.push(a[i]);if(a[i].getElementsByTagName(tag).length){n=a[i].getElementsByTagNa me(tag).length}i=i+n;n=0;} return arr;},$li:function(obj,n){return this.$$_('li',this.$$_('ul',obj)[n])},linear:function(t,b,c,d){return c*t/d + b;},easeIn:function(t,b,c,d){return c*(t/=d)*t*t*t + b;},easeOut:function(t,b,c,d){return -c*((t=t/d-1)*t*t*t - 1) + b;},easeInOut:function(t,b,c,d){return ((t/=d/2) < 1)?(c/2*t*t*t*t + b):(-c/2*((t-=2)*t*t*t - 2) + b);},style:function(obj,style){returnobj['offset'+style.replace(/^(.)/,new Function('returnarguments[1].toUpperCase()'))];},opa:function(obj,v){if(v!=undefined) {v=v>100?100:(v<0?0:v); obj.style.filter = "alpha(opacity=" + v + ")"; obj.style.opacity = (v / 100);}else return(!+[1,])?((obj.filters.alpha)?obj.filters.alpha.opacity:100):((obj.st yle.opacity)?obj.style.opacity*100:100);},animate:function(obj,prop,val,spd,type,fn){var opa=prop=='opacity'?true:false;if(opa&&obj.style.display=='none'){obj.style.display='';this.opa(ob j,0);}vart=0,b=opa?this.opa(obj):parseInt(this.style(obj,prop)),c=val-b,d=spd| |50,st=type||'easeOut',m=c>0?'ceil':'floor';if(obj[prop+'Timer']) clearInterval(obj[prop+'Timer']);obj[prop+'Timer']=setInterval(function(){if(opa&&t<d){myFocus.opa(obj,Math[m](myFocus[st](++t,b,c,d)));} elseif(!opa&&t<d){obj.style[prop]=Math[m](myFocus[st](++t,b,c,d))+'px';} else{if(opa&&val==0){obj.style.display='none'}clearInterval(obj[prop+'Tim er']);fn&&fn.call(obj);}},10);return this;},fadeIn:function(obj,speed,fn){this.animate(obj,'opacity',100,speed== undefined?20:speed,'linear',fn);return this;},fadeOut:function(obj,speed,fn){this.animate(obj,'opacity',0,speed==u ndefined?20:speed,'linear',fn);return this;},slide:function(obj,params,speed,easing,fn){for(var p in params) this.animate(obj,p,params[p],speed,easing,fn);return this;},stop:function(obj){varanimate=['left','right','top','bottom','width','height','opacity']; for(var i=0;i<animate.length;i++) if(obj[animate[i]+'Timer']) clearInterval(obj[animate[i]+'Timer']);return this;},initCSS:function(p){var css=[],oStyle =document.createElement('style');oStyle.type='text/css';if(p.width){css.push('.'+p.style+'*{margin:0;padding:0;border:0;list-style:none;}.'+p.style+'{position: relative;width:'+p.width+'px;height:'+p.height+'px;overflow:hidden;fo nt:12px/1.5Verdana,Geneva,sans-serif;background:#fff;}.'+p.style+' .loading{posi tion:absolute;z-index:9999;width:100%;height:100%;color:#666;text-ali gn:center;padding-top:'+0.3*p.height+'px;background:#fff}.'+p.style+' .txt li,.'+p.style+' .txt lispan,.'+p.style+' .txt-bg{width:'+p.width+'px;height:'+p.txtHeight+'p x;line-height:'+p.txtHeight+'px;overflow:hidden;}')}if(oStyle.styleSheet){oStyle.styleSheet.cssText=css.join('');} else {oStyle.innerHTML=css.join('');}var oHead =this.$$('head',document)[0];oHead.insertBefore(oStyle,oHead.firstChil d);},setting:function(par){if(window.attachEvent){(function(){try{myFocus.$(par.id).className= par.style;myFocus.initCSS(par);}catch(e){setTimeout(arguments.callee, 0);}})();window.attachEvent('onload',function(){myFocus[par.style](pa r)});}else{document.addEventListener("DOMContentLoaded",function(){my Focus.$(par.id).className=par.style;myFocus.initCSS(par);},false);win dow.addEventListener('load',function(){myFocus[par.style](par)},false );}},addList:function(obj,cla){var s=[],n=this.$li(obj,0).length,num=cla.length;for(var j=0;j<num;j++){s.push('<ul class='+cla[j]+'>');for(vari=0;i<n;i++){s.push('<li>'+(cla[j]=='num'?('<a>'+(i+1)+'</a>'):(cla[j ]=='txt'?this.$li(obj,0)[i].innerHTML.replace(/\>(.|\n|\r)*?(\<\/a\>) /i,'>'+(this.$$('img',obj)[i]?this.$$('img',obj)[i].alt:'')+'</a>'):( cla[j]=='thumb'?'<imgsrc='+(this.$$('img',obj)[i].getAttribute("thumb")||this.$$('img',obj )[i].src)+' />':'')))+'<span></span></li>')};s.push('</ul>');}; obj.innerHTML+=s.join('');},switchMF:function(fn1,fn2){return "box.removeChild(this.$$('div',box)[0]);varrun=function(idx){("+fn1+")();if (index == n - 1) index = -1;var next = idx != undefined ? idx: index +1;("+fn2+")();index=next;};run(index);if(par.auto!==false) varauto=setInterval(function(){run()},t);box.onmouseover=function(){if(a uto) clearInterval(auto);};box.onmouseout=function(){if(auto)auto=setInterval(function(){run()},t);}"},bind:function(arrStr,type,delay){return "for (varj=0;j<n;j++){"+arrStr+"[j].index=j;if("+type+"=='click'){"+arrStr+"[j ].onmouseover=function(){if(this.className!='current')this.className='hover'};"+arrStr+"[j].onmouseout=function(){if(this.c lassName=='hover')this.className=''};"+arrStr+"[j].onclick=function(){if(this.index!=in dex) run(this.index)};}elseif("+type+"=='mouseover'){"+arrStr+"[j].onmouseover=function(){varself=this;if("+delay+"==0){if(!self.className) run(self.index)}else "+arrStr+".d=setTimeout(function(){if(!self.className)run(self.index)},"+(delay==undefined?100:delay)+")};"+arrStr+"[j].onm ouseout=function(){clearTimeout("+arrStr+".d)};}else{alert('myFocus不支持这样的事件 \"'+"+type+"+'\"');break;}}"},extend:function(fnObj){for(var p in fnObj) this[p]=fnObj[p];}};myFocus.extend({mF_tab:function(par){var box=this.$(par.id);this.$$('ul',box)[1].innerHTML='<li><ulclass=swt>'+this.$$('ul',box)[1].innerHTML+'</ul></li>';varbtn=this.$li(box,0),wrap=this.$$('ul',box)[1],swt=this.$$('ul',box)[2 ],cont=this.$$_('li',swt);var index=par.index||0,n=btn.length,t=par.time*1000;swt.style.width=n*par.width+'px';for(var i=0;i<n;i++)cont[i].style.cssText='width:'+par.width+'px;height:'+par.height+'px; float:left;';par.height=par.height=='auto'?swt.offsetHeight:par.height;wrap.style.cssText='width:'+par.width+'px;height:'+par.height+'px;'; box.style.cssText='width:'+(par.width+2)+'px;height:'+(par.height+2 9)+'px;';if(par.type=='fade'||par.type=='none'){for(var i=0;i<n;i++)cont[i].style.display='none';}eval(this.switchMF(function(){btn[index].className='';if(par.type=='fade'||par.type=='none')cont[index].style.display='none';},function(){if(par.type=='slide')myFocus.slide(swt,{left:-(next*par.width)},20,'easeInOut') if(par.type=='fade') myFocus.fadeIn(cont[next]);if(par.type=='none') cont[next].style.display='';btn[next].className='current';}))eval(this.bind('btn','par.trigger',par.delay));}})var tabWrap=function(){myFocus.setting({style:'mF_tab',id:'tabWrap',trigger:'mouseover',type:'slide',auto:false,time:2,width:600,height:361});}var tabInner1=function(){myFocus.setting({style:'mF_tab',id:'tabInner1',trigger:'mouseover',type:'slide',auto:false,time:2,width:500,height:261});}var tabInner2=function(){myFocus.setting({style:'mF_tab',id:'tabInner2',trigger:'mouseover',type:'slide',auto:true,width:400,height:61});}if(!+[1,]){tabInner2();tabInner1();tabWrap();}else{tabWrap();tabInner1();tabInner2();}myFocus.setting({style:'mF_tab',id:'qqTab',trigger:'mouseover',type:'slide',auto:true,time:2,width:600,height:106});myFocus.setting({style:'mF_tab',id:'qqTabAuto',trigger:'mouseover',type:'fade',auto:false,time:2,width:600,height:'auto'});</script></head><body><div class="box"><h4>支持无限嵌套</h4><div id="tabWrap"><div class="loading"><span>请稍候...</span></div> <!--载入画面--><ul class="btn"><!--标题--><li>朋友</li><li>兄弟</li><li>亲人</li><li>情人</li></ul><ul class="cont"><!--内容--><p>朋友朋友朋友</p><div id="tabInner1"><div class="loading"><span>请稍候...</span></div><!--载入画面--><ul class="btn"><!--标题--><li>朋友</li><li>兄弟</li><li>亲人</li><li>情人</li></ul><ul class="cont"><!--内容--><li><p>朋友朋友朋友</p><div id="tabInner2"><div class="loading"><span>请稍候...</span></div> <!--载入画面--><ul class="btn"><!--标题--><li>朋友</li><li>兄弟</li><li>亲人</li><li>情人</li></ul><ul class="cont"><!--内容--><li><p>朋友朋友朋友</p></li><li><p>兄弟兄弟兄弟</p></li><li><p>亲人亲人亲人</p></li><li><p>情人情人情人</p></li></ul></div></li><li><p>兄弟兄弟兄弟</p></li><li><p>亲人亲人亲人</p></li><li><p>情人情人情人</p></li></ul></div></li><li><p>兄弟兄弟兄弟</p></li><li><p>亲人亲人亲人</p></li><li><p>情人情人情人</p></li></ul></div></div><style>.qqTab{margin-bottom:12px;}.qqTab .btn li { background:#A1DEFE;border-color:#36BAF0; }.qqTab .btn li.current { height:27px; background:#F9FEFF; }.qqTab .cont{border-color:#36BAF0; }.qqTab .list{float:left;overflow:hidden;text-align:center;margin:16px ;margin-right:0;display:inline;}.qqTab .list ul li{list-style:circle;}.qqTab .left{width:150px;background:#1EB2EF;}.qqTab .middle{width:236px;background:#D4F2FD;}.qqTab .right{width:150px;background:#CE4982;}</style><div class="box qqTab"><h4>仿QQ今日要闻实例</h4><div id="qqTab"><div class="loading"><span>请稍候...</span></div><!--载入画面--><ul class="btn"><!--标题--><li>新闻</li><li>财经</li><li>娱乐</li><li>体育</li></ul><ul class="cont"><!--内容--><li><div class="list left"><ul><li>新闻左列表</li><li>新闻左列表</li> <li>新闻左列表</li> <li>新闻左列表</li> </ul></div><div class="list middle"> <ul><li>新闻中列表</li><li>新闻中列表</li> <li>新闻中列表</li> <li>新闻中列表</li> </ul></div><div class="list right"><ul><li>新闻右列表</li><li>新闻右列表</li> <li>新闻右列表</li> <li>新闻右列表</li> </ul></div></li><li><div class="list left"><ul><li>财经左列表</li><li>财经左列表</li> <li>财经左列表</li> <li>财经左列表</li> </ul></div><div class="list middle"> <ul><li>财经中列表</li><li>财经中列表</li><li>财经中列表</li> <li>财经中列表</li> </ul></div><div class="list right"><ul><li>财经右列表</li><li>财经右列表</li> <li>财经右列表</li> <li>财经右列表</li> </ul></div></li><li><div class="list left"><ul><li>娱乐左列表</li><li>娱乐左列表</li> <li>娱乐左列表</li> <li>娱乐左列表</li> </ul></div><div class="list middle"> <ul><li>娱乐中列表</li><li>娱乐中列表</li> <li>娱乐中列表</li> <li>娱乐中列表</li> </ul></div><div class="list right"><ul><li>娱乐右列表</li><li>娱乐右列表</li> <li>娱乐右列表</li> <li>娱乐右列表</li> </ul></div></li><li><div class="list left"><ul><li>体育左列表</li><li>体育左列表</li><li>体育左列表</li></ul></div><div class="list middle"><ul><li>体育中列表</li><li>体育中列表</li><li>体育中列表</li><li>体育中列表</li></ul></div><div class="list right"><ul><li>体育右列表</li><li>体育右列表</li><li>体育右列表</li><li>体育右列表</li></ul></div></li></ul></div></div><div class="box qqTab"><h4>支持高度自适应（auto）设置</h4><div id="qqTabAuto"><div class="loading"><span>请稍候...</span></div> <!--载入画面--><ul class="btn"><!--标题--><li>新闻</li><li>财经</li><li>娱乐</li><li>体育</li></ul><ul class="cont"><!--内容--><li><div class="list left"><ul><li>新闻左列表</li><li>新闻左列表</li><li>新闻左列表</li></ul></div><div class="list middle"><ul><li>新闻中列表</li><li>新闻中列表</li><li>新闻中列表</li><li>新闻中列表</li><li>这是测试高度自适应</li> <li>这是测试高度自适应</li> <li>这是测试高度自适应</li> <li>这是测试高度自适应</li> </ul></div><div class="list right"><ul><li>新闻右列表</li><li>新闻右列表</li><li>新闻右列表</li><li>新闻右列表</li></ul></div></li><li><div class="list left"><ul><li>财经左列表</li><li>财经左列表</li><li>财经左列表</li><li>财经左列表</li></ul></div><div class="list middle"><ul><li>财经中列表</li><li>财经中列表</li><li>财经中列表</li><li>财经中列表</li></ul></div><div class="list right"><ul><li>财经右列表</li><li>财经右列表</li> <li>财经右列表</li> </ul></div></li><li><div class="list left"><ul><li>娱乐左列表</li><li>娱乐左列表</li> <li>娱乐左列表</li> <li>娱乐左列表</li> </ul></div><div class="list middle"> <ul><li>娱乐中列表</li><li>娱乐中列表</li> <li>娱乐中列表</li> <li>娱乐中列表</li> </ul></div><div class="list right"><ul><li>娱乐右列表</li><li>娱乐右列表</li> <li>娱乐右列表</li> <li>娱乐右列表</li> </ul></div></li><li><div class="list left"><ul><li>体育左列表</li><li>体育左列表</li> <li>体育左列表</li> <li>体育左列表</li> </ul></div><div class="list middle"> <ul><li>体育中列表</li><li>体育中列表</li> <li>体育中列表</li> </ul></div><div class="list right"><ul><li>体育右列表</li><li>体育右列表</li> <li>体育右列表</li> <li>体育右列表</li> </ul></div></li></ul></div></div></body></html>。
