- 浏览: 1615537 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
今天逛经典论坛发现WellFrog兄
年前写的一个js选项卡
o(∩_∩)o... 很好,很强大
在这里收藏了~!
年前写的一个js选项卡
o(∩_∩)o... 很好,很强大
在这里收藏了~!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>井底的蛙</title> <script type="text/javascript"> /* 选项卡封装 by 井底的蛙 2008-2-4 */ opCard = function() { this.bind = new Array(); this.index = 0; //默认显示哪个选项卡,从0开始 this.style = new Array(); //["","",""] this.overStyle = false; //选项是否有over, out变换样式事件,样式为this.style[2] this.overChange = false; //内容是否用over, out直接激活 this.menu = false; //菜单类型 this.nesting = [false,false,"",""]; //是否嵌套,后面2个参数是指定menu,info的子集深度所用id this.auto = [false, 1000]; //自动滚动[true,2000] this.timerID = null; //自动播放的 this.menutimerID = null; //菜单延时的 this.creat = function(func) { var _arrMenu = document.getElementById(this.bind[0]).getElementsByTagName(this.bind[1]); var _arrInfo = document.getElementById(this.bind[2]).getElementsByTagName(this.bind[3]); var my = this, i; var argLen = arguments.length; var arrM = new Array(); if(this.nesting[0] || this.nesting[1]) // 有选项卡嵌套 { // 过滤出需要的数据 var arrMenu = this.nesting[0]?getChilds(_arrMenu,this.bind[0],2):_arrMenu; var arrInfo = this.nesting[1]?getChilds(_arrInfo,this.bind[2],3):_arrInfo; } else { var arrMenu = _arrMenu; var arrInfo = _arrInfo; } var l = arrMenu.length; if(l!=arrInfo.length){alert("菜单和内容必须拥有相同的数量\n如果需要,你可以放一个空的在那占位。")} // 修正 if(this.menu){this.auto=false;this.overChange=true;} //如果是菜单,则没有自动运行,有over, out直接激活 // 循环添加各个事件等 for(i=0;i<l;i++) { arrMenu[i].cName = arrMenu[i].className; arrMenu[i].className = (i!=this.index || this.menu)?getClass(arrMenu[i],this.style[0]):getClass(arrMenu[i],this.style[1]); //加载样式,菜单的话统一样式 if(arrMenu[i].getAttribute("skip")) // 需要跳过的容器 { if(this.overStyle || this.overChange) // 有over, out 改变样式 或者 激活 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } arrMenu[i].onclick = function(){if(argLen==1){func()}} arrInfo[i].style.display = "none"; continue; } if(i!=this.index || this.menu){arrInfo[i].style.display="none"}; //隐藏初始化,菜单的话全部隐藏 arrMenu[i].index = i; //记录自己激活值[序号] arrInfo[i].index = i; if(this.overChange) //有鼠标over, out事件 { arrMenu[i].onmouseover = function(){changeOption(this);my.menu?changeMenu(1):autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeOption(this);my.menu?changeMenu(0):autoStop(this, 1);} } else //onclick触发 { arrMenu[i].onclick = function(){changeOption(this);autoStop(this, 0);if(argLen==1){func()}} if(this.overStyle) // 有over, out 改变样式 { arrMenu[i].onmouseover = function(){changeTitle(this, 2);autoStop(this, 0);} arrMenu[i].onmouseout = function(){changeTitle(this, 0);autoStop(this, 1);} } else // 没有over, out 改变样式 { if(this.auto[0]) // 有自动运行 { arrMenu[i].onmouseover = function(){autoStop(this, 0);} arrMenu[i].onmouseout = function(){autoStop(this, 1);} } } } if(this.auto[0] || this.menu) //arrinfo 控制自动播放 { arrInfo[i].onmouseover = function(){my.menu?changeMenu(1):autoStop(this, 0);} arrInfo[i].onmouseout = function(){my.menu?changeMenu(0):autoStop(this, 1);} } } //for结束 if(this.auto[0]) { this.timerID = setTimeout(autoMove,this.auto[1]) } // 自动播放 function autoMove() { var n; n = my.index + 1; if(n==l){n=0}; while(arrMenu[n].getAttribute("skip")) // 需要跳过的容器 { n += 1; if(n==l){n=0}; } changeOption(arrMenu[n]); my.timerID = setTimeout(autoMove,my.auto[1]); } // onmouseover时,自动播放停止。num:0为over,1为out。 obj暂时无用。 -_-!! function autoStop(obj, num) { if(!my.auto[0]){return;} //if(obj.index==my.index) num == 0 ? clearTimeout(my.timerID) : my.timerID = setTimeout(autoMove,my.auto[1]); } // 改变选项卡 function changeOption(obj) { arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); //修改旧内容 arrInfo[my.index].style.display = "none"; //隐藏旧内容 obj.className = getClass(obj,my.style[1]); //修改为新样式 arrInfo[obj.index].style.display = ""; //显示新内容 my.index = obj.index; //更新当前选择的index } /* 只有onclick时,overStyle的onmouseover,onmouseout事件。用来预激活 obj:目标对象。 num:1为over,0为out */ function changeTitle(obj, num) { if(!my.overStyle){return;}; if(obj.index!=my.index){obj.className = getClass(obj,my.style[num])} } /* 菜单类型时用 obj:目标对象。 num:1为over,0为out */ function changeMenu(num) { if(!my.menu){return;} num==0?my.menutimerID = setTimeout(menuClose,1000):clearTimeout(my.menutimerID) } //关闭菜单 function menuClose() { arrInfo[my.index].style.display = "none"; arrMenu[my.index].className = getClass(arrMenu[my.index],my.style[0]); } // 得到className(防止将原有样式覆盖) function getClass(o, s) { if(o.cName==""){return s} else{return o.cName + " " + s} } //嵌套情况下得到真正的子集 function getChilds(arrObj, id, num) { var depth = 0; var firstObj = my.nesting[num]==""?arrObj[0]:document.getElementById(my.nesting[num]); //得到第一个子集 do //计算深度 { if(firstObj.parentNode.getAttribute("id")==id){break}else{depth+=1} firstObj = firstObj.parentNode; } while(firstObj.tagName.toLowerCase()!="body") // body强制退出。 var t; var arr = new Array(); for(i=0;i<arrObj.length;i++) //过滤出需要的数据 { t = arrObj[i], d = 0; do { if(t.parentNode.getAttribute("id")==id && d == depth) { arr.push(arrObj[i]);break; //得到数据 } else { if(d==depth){break};d+=1; } t = t.parentNode; } while(t.tagName.toLowerCase()!="body") // body强制退出 } return arr; } } } window.onload = function() { var aa = new opCard(); aa.bind = ["a1","div","b1","div"]; aa.style = ["a1_0","a1_1","a1_0"]; aa.index = 0; aa.nesting = [false,true,"",""] aa.creat(); aa =null; // 默认的onclick中,第一个例子 var bba = new opCard(); bba.bind = ["a2","li","b2","div"]; bba.style = ["style1","style2","style3"]; bba.overStyle = true; bba.creat(); bba = null; // 默认的onclick中,第二个例子 var bbb = new opCard(); bbb.bind = ["a3","li","b3","div"]; bbb.style = ["style1","style2","style3"]; bbb.overStyle = true; bbb.creat(); bbb = null; // onmousover触发中的例子 var cc = new opCard(); cc.bind = ["a4","li","b4","div"]; cc.style = ["style1","style2","style3"]; cc.overStyle = true; cc.overChange = true; cc.creat(); cc = null; //自动播放auto第一个例子 var dd = new opCard(); dd.bind = ["a5","li","b5","div"]; dd.style = ["style1","style2","style3"]; dd.auto = [true, 3000]; dd.creat(); dd = null; //自动播放auto第二个例子 var ee = new opCard(); ee.bind = ["a6","li","b6","div"]; ee.style = ["style1","style2","style3"]; ee.auto = [true, 2000]; ee.overChange = true; ee.creat(); ee = null; //自动播放auto第三个例子 var ff = new opCard(); ff.bind = ["a7","li","b7","div"]; ff.style = ["style1","style2","style3"]; ff.auto = [true, 1000]; ff.overChange = true; ff.overStyle = true; ff.creat(); ff = null; //菜单导航例子 var gg = new opCard(); gg.bind = ["a8","li","b8","div"]; gg.style = ["style1","style2","style3"]; gg.overStyle = true; gg.menu = true; gg.creat(); gg = null; //其他应用 var hh = new opCard(); hh.bind = ["a9","li","a9","li"]; hh.style = ["style4","style4","style4"]; //hh.overStyle = true; hh.auto = [true, 1000]; hh.creat(); hh = null; } </script> <style type="text/css"> body{font-size:12px; font-family:Verdana,"宋体";} p,ul{margin:0px; padding:0px;} td,div{font-size:12px} .a1_0 {border:1px dotted #3399FF; width:120px; background-color:#f5f5f5; margin:3px; padding:2px 0px; cursor:pointer;} .a1_1 {border:1px solid #FF9900; width:120px; margin:3px; padding:2px 0px; cursor:pointer;} .test{text-decoration:underline;} #b1 div.s{border:1px solid #999999; width:90%; height:500px; margin:3px; padding:10px; overflow-y:auto; line-height:18px;} #b1 div.s strong{color:#0066FF;} /* */ .style1{float:left; width:80px; background-color:#f5f5f5; border:1px solid #3399FF; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style2{float:left; width:80px; background-color:#f5f5f5; border:1px solid #FF9900; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} .style3{float:left; width:80px; background-color:#f5f5f5; border:1px solid #666666; text-align:center; margin-right:2px; list-style-type:none; cursor:pointer;} #a2,#a3,#a4,#a5,#a6,#a7,#a8 {height:22px;} #b2 div,#b3 div,#b4 div,#b5 div,#b6 div,#b7 div{border:1px solid #FF9900; height:100px; width:400px; padding:5px; overflow-y:auto;} #b8 div{border:1px solid #FF9900; height:20px; width:350px; padding:2px 5px;} #b8 div a{margin-right:20px;} .style4{float:left; background-color:#999999; text-align:left; list-style-type:none; padding:2px 5px; color:#FFFFFF;} </style> </head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td id="a1" width="140" valign="top" align="center"> <div class="test">简单介绍</div> <div class="test">默认的onclick</div> <div class="test">onmousover触发</div> <div class="test">自动播放auto</div> <div class="test">菜单导航</div> <div class="test">关于嵌套</div> <div class="test">其他应用</div> <div class="test">一些说明</div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> <div class="test"> </div> </td> <td id="b1" valign="top"> <div class="s"> 封装了一个选项卡,不过已经不像选项卡了-_-!!!<br><br> 现稍微说明下吧,如果不明白的话,旁边有几个例子可能说明起来更清楚些<br><br> <p> <strong>obj.bind = ["a1","td","b1","div"];</strong><br> 绑定id="a1"下的td标签为菜单,绑定id="b1"下的div标签为内容,简单么?<br> td标签的数量和div标签的数量必须相同<br> (若不需要显示内容,只显示菜单话,可以这个在td标签上加<td skip="true">)<br> 如果id="a1"下的td标签有嵌套表格,这样的话,就不是所有的td都是菜单,这时候需要用下nesting<br><br> <strong>obj.nesting = [false,true,"",""];</strong><br> 当标签tag有嵌套时,需要用到这个<br> 比如选项卡内容是放在div容器里,而本身这个内容里也有div标签,这时就需要用到<br> 菜单嵌套为false,内容嵌套为true,且会自动判断出内容标签,多数时候这样就可以了<br> 判断方法为,认定getElementsByTagName后第一个标签为内容第一项,其他的就用这个第一项的深度来判断<br> 但有些情况下,这样还是不行<br> 我用后面2个参数做id来指定菜单或者内容的第一项nesting = [false,true,"","q2"];<br> 这样就肯定不会错了(不明白的话看下例子就简单多了)<br><br> <strong>obj.index = 0;</strong><br> 默认显示第几个选项卡,序号从0开始<br><br> <strong>obj.style = ["c1","c2","c3"]</strong><br> 菜单加载的样式的className:<br> 菜单未选中的className是c1<br> 菜单选中的className是c2<br> 菜单onmouseover的className是c3<br><br> <strong>obj.overStyle = false;</strong><br> 选项卡是否有onmouseover, onmouseout变换样式事件[非激活选项卡内容],对应的样式为style[2]<br><br> <strong>obj.overChange = false;</strong><br> 选项卡内容是否用onmouseover, onmouseout直接激活<br><br> <strong>obj.menu = false;</strong><br> 选项卡是菜单类型<br><br> <strong>obj.auto = [false, 1000];</strong><br> 选项卡是否自动播放,播放速度(毫秒)<br><br> <strong>obj.creat();</strong><br> 开始生成选项卡,需要onclick触发事件的话,可以obj.creat(函数名)<br> 所有的都会触发 </p> </div> <div class="s"> <!--默认的onclick中,第一个例子--> <div id="a2"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b2"> <div>这个例子是用onclick触发的<br>并设置overStyle = true;<br>(over,out改变样式,但不激活)</div> <div> var bba = new opCard();<br> bba.bind = ["a2","li","b2","div"];<br> bba.style = ["style1","style2","style1"];<br> bba.overStyle = true;<br> bba.creat();<br> bba = null; </div> <div>33333</div> <div>4444444</div> </div><br> <!--默认的onclick中,第二个例子--> <div id="a3"> <ul> <li>1</li> <li>2</li> <li>3</li> <li skip="true">4</li> </ul> </div> <div id="b3"> <div> 这个例子是比上面增加skip="true"<br>即<li skip="true">4</li><br>所以选项卡4是没有内容的<br> 你可以为选项卡的文字直接加上链接,我这里就不加了 </div> <div>222222</div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s"> <!--onmousover触发中的例子--> <div id="a4"> <ul> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b4"> <div>这个例子是用onmouseover触发的<br>(over,out直接激活)<br>并且<li skip="true">3</li>[选项卡3不会被激活]<br>overStyle = true;</div> <div> var cc = new opCard();<br> cc.bind = ["a4","li","b4","div"];<br> cc.style = ["style1","style2","style1"];<br> cc.overStyle = true;<br> cc.overChange = true;<br> cc.creat();<br> cc = null; </div> <div>33333</div> <div>4444444</div> </div> </div> <div class="s"> <!--自动播放auto第一个例子--> <div id="a5"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b5"> <div>1111111<br>我每3秒切换一个选项卡</div> <div> var ee = new opCard();<br> ee.bind = ["a6","li","b6","div"];<br> ee.style = ["style1","style2","style1"];<br> ee.auto = [true, 2000];<br> ee.overChange = true;<br> ee.creat();<br> ee = null; </div> <div>33333<br>我每3秒切换一个选项卡</div> <div>4444444<br>我每3秒切换一个选项卡</div> </div> <div>注:<strong>鼠标在选项卡任意位置都会使停止播放</strong><br><br>下面这个结合overChange一起</div> <!--自动播放auto第二个例子--> <div id="a6"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="b6"> <div>1111111<br>我每2秒切换一个选项卡</div> <div> var dd = new opCard();<br> dd.bind = ["a5","li","b5","div"];<br> dd.style = ["style1","style2","style1"];<br> dd.auto = [true, 3000];<br> dd.creat();<br> dd = null;<br> </div> <div>33333<br>我每2秒切换一个选项卡</div> <div>4444444<br>我每2秒切换一个选项卡</div> </div> <div><br>下面这个再来个<li skip="true">3</li>,且overStyle=true;</div> <!--自动播放auto第三个例子--> <div id="a7"> <ul> <li>1</li> <li>2</li> <li skip="true">3</li> <li>4</li> </ul> </div> <div id="b7"> <div>1111111<br>我每1秒切换一个选项卡</div> <div> var ff = new opCard();<br> ff.bind = ["a7","li","b7","div"];<br> ff.style = ["style1","style2","style1"];<br> ff.auto = [true, 1000];<br> ff.overChange = true;<br> ff.overStyle = true;<br> ff.creat();<br> ff = null; </div> <div>33333<br>我每1秒切换一个选项卡</div> <div>4444444<br>我每1秒切换一个选项卡</div> </div> </div> <!--菜单导航的例子--> <div class="s"> <div id="a8"> <ul> <li skip="true">首页</li> <li>新闻</li> <li>论坛</li> <li skip="true">联系我们</li> </ul> </div> <div id="b8"> <div></div> <div><a href="#">国内新闻</a><a href="#">国际新闻</a><a href="#">娱乐新闻</a><a href="#">体育新闻</a></div> <div><a href="#">蓝色理想</a><a href="#">blue idea</a></div> <div></div> </div> <div><strong>注:菜单延时一秒关闭</strong><br>这里只是演示,实际可以设置下position什么的。-o-<br>多级菜单不知道能不能支持,没试过</div> </div> <div class="s"> 我见过的许多选项卡都不能用来嵌套<br>但还是有些时候会用到的<br> 所以如您所见,这个演示本身就是一个嵌套,效果还不错 </div> <!--其他应用--> <div class="s"> 比如图片切换什么,不过我太懒了,不写了。。。<br> 这个能干什么,我也不知道。。 <div id="a9"> <li>新年好啊</li> <li>快过年了</li> <li>天好冷啊</li> <li>大家去抢红包吧</li> <li>红包~!红包~!你在哪里啊?</li> </div> </div> <div class="s"> 选项卡标题(或者菜单)必须和选项卡内容的数量相同,否则会出错<br>即使选项卡菜单skip="true",内容也要放一个空的标签占位<br> 其他好像暂时没发现什么<br><br> 本来打算加入ajax的,但有些还没想好。<br> 效率的话,应该还行,我这个演示放了几个选项卡,似乎还不错<br><br> 写这个的目的就是以后弄选项卡只要处理样式就可以了,很多选项卡或者切换之类都是大同小异<br> 本来是打算弄些特效在里面,考虑会增加不少代码,所以不加了,简洁点。<br><br> 哦,还有选项卡是附加样式,不会取消原本设置的样式<br> 如左边的下划线是原有的样式 </div> <div class="s">啥都没有1</div> <div class="s">啥都没有2</div> <div class="s">啥都没有3</div> <div class="s">啥都没有4</div> </td> </tr> </table> </body> </html>
发表评论
-
div嵌套居中解决办法FireFox火狐和IE
2009-09-10 10:02 4006div嵌套居中解决办法FireFox火狐和IE DIV,嵌套剧 ... -
收到 Balsamiq Mockups key了
2009-02-12 21:21 14383http://llying.iteye.com/admin/b ... -
神奇的手绘界面原型设计工具--Balsamiq Mockups
2009-02-12 08:52 11567今天无意中让我发现了一个神奇的界面原型设计工具--Balsam ... -
email中的附件上传
2008-09-24 11:24 1403<body> <span style= ... -
漂亮的Table表格--适合企业
2008-09-10 10:06 7304<!DOCTYPE HTML PUBLIC &quo ... -
CSS+DIV做一个这样的表格
2008-03-24 11:00 3517CSS+DIV做一个这样的表格 <!DOCTYPE ... -
让一行页脚保持在底部
2008-03-24 10:56 1779作者:zishu http://www.zishu.cn/bl ... -
表单划过变换颜色
2008-03-24 10:25 1542<!DOCTYPE html PUBLIC &quo ... -
又收集一个实用的Tab选项卡
2008-03-24 09:46 1472效果如图 至于源码 就不贴了 直接将源文件上传 -
来看看最优秀的xhtml是如何写的
2008-03-19 08:52 1305来看看最优秀的xhtml是如何写的 附图~~~~! -
web2.0中常用的配色
2008-03-19 08:18 1381<style type="text/css ... -
用最简洁干净的代码编写一个表格!这是一个公司招聘的面试题.
2008-03-17 16:03 2980要求: 1.外框宽度自适应,只能用百分比,以便可以让它自动拉伸 ... -
一个简单的表格
2008-03-17 14:41 1411表格很简单,不过挺实用的 <HTML> & ...
相关推荐
javascript实现选项卡功能 javascript实现选项卡功能
用作大家学习参考
超强的JS选项卡,有多种风格.每种都非常漂亮,功能非常强大
js选项卡功能,选项卡源码,网页特效代码
js选项卡html,自己做的选项卡功能值得参考,有的从网上找到的~~~~~~~~
界面简单,功能好用的JS选项卡,找了好久才找到的 HOHO
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
vs中bs开发不带选项卡控件,这个是js轻量级框架的一个功能,已经兼容到vs中,压缩包有实例 百分百可用,有需要请带走。
javascript特效多功能图片延迟加载选项卡自动切换内容,支持多种选项卡切换、是一种对浏览器优化的方式,同时减少服务器的请求负担。
通过jquery的javascript代码及css实现选项卡功能,美观大方,要求加载jQueryUI
此作品是一款功能非常强大的jquery选项卡插件 此版本是一个测试版 但功能已经相当的强大了 效果已经非常棒了 页面上使用的代码也非常简单 jquery插件代码也不多 每个小功能还写好了注释 方便网友们学习 多的就不一一...
tab选项卡是常见的网页效果,也叫滑动门特效,本资源实现自动调转和手动(click onmouseover)切换
html+css布局,使用原生javascript点击触发选项卡,简单实用一看就会;
简单易懂,几行js代码就实现了选项卡功能,兼容各种浏览器,希望能对新手有所帮助!
用js写的选项卡支持多个选项卡之间的移动、搜索等功能,页面美观大方,功能使用
jquery可关闭选项卡效果代码,当内容超出标签总宽度后可左右滑动显示多出内容
JS实现选项卡功能,稍作改动可用在自己的网页上
原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function...
JS+CSS+HTML实现选项卡切换功能 切换选项卡,两种切换方式,一种是单击切换选项,一种是鼠标滑动切换,通过参数来控制,切换
完全css编写 没有js 网页选项卡 功能强大