支持多级的选项卡

稿源：互联网 2022-04-24 08:23:05 点击： 2514 撤稿纠错

支持多级的选项卡效果，有点击后变化的，有鼠标经过变化的，都很漂亮实用。

以下讨论的是和特效相关的支持多级的选项卡教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head><br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br><title>Veryide.Effect.JS / VeryIDE.TabOption(); - VeryIDE Labs</title><br><meta name="keywords" content="VeryIDE,实验室,Labs,VeryIDE labs,web2.0,JavaScript,CSS" /><br><meta name="description" content="VeryIDE实验室 - 为您提供VeryIDE最创新、最值得期待的产品" /><br><link rel="icon" href="favicon.ico" type="image/x-icon" /><br><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /><br><script type="text/javascript" src="http://www.veryide.com/veryide/js/veryide.core.js"></script><br><script type="text/javascript" src="http://www.veryide.com/veryide/js/veryide.library.js"></script><br><script type="text/javascript" src="http://www.veryide.com/veryide/js/veryide.effect.js"></script><br><style type="text/css"><br><br></style><br></head><br><body><br><div id="content"><br> <h2>第一可能无法正常运行,请刷新再看效果</h2><br>  <br>   <div class="box"><br>    <strong>鼠标点击切换</strong><br>    <br>    <ol><br>     <li id="m-1">卡片一</li><br>     <li id="m-2">卡片二</li><br>    </ol><br>   <br>    <div id="u-1"><br>     <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/20081113124851a8ef3.jpg" alt="" /><br>    </div><br>    <br>    <div id="u-2"><br>     <img name="" src="http://img1.cache.netease.com/lady/2008/11/12/200811121527103131e.jpg" alt="" /><br>    </div><br>   </div><br> <br>            <script type="text/javascript"><br>    <br>            var WindowVote2 = new VeryIDE.TabOption("click");//绑定到onclick事件<br>   <br>            WindowVote2.TabClass("active","");//tab的两个class<br>   <br>            WindowVote2.Add(document.getElementById("m-1"),document.getElementById("u-1"));//tab&box<br>            WindowVote2.Add(document.getElementById("m-2"),document.getElementById("u-2"));//tab2&box2<br>    WindowVote2.Play(1);//默认显示第二张卡片<br>            </script> <br> <br>  <br>   <div class="box"><br>    <strong>鼠标靠近切换</strong><br>    <br>    <ol><br>     <li id="m-3">卡片一</li><br>     <li id="m-4">卡片二</li><br>    </ol><br>   <br>    <div id="u-3"><br>     <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/20081113124701885f4.jpg" alt="" /><br>    </div><br>    <br>    <div id="u-4"><br>     <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/2008111312471798200.jpg" alt="" /><br>    </div><br>   </div><br> <br>            <script type="text/javascript"><br>    <br>            var WindowVote3 = new VeryIDE.TabOption("mouseover");<br>   <br>            WindowVote3.TabClass("active","");<br>            //WindowVote2.BoxClass("","hide");<br>   <br>            WindowVote3.Add(document.getElementById("m-3"),document.getElementById("u-3"));<br>            WindowVote3.Add(document.getElementById("m-4"),document.getElementById("u-4"));<br>      WindowVote3.Play(1);<br>            </script> <br> <br>  <br>   <div class="box"><br>    <strong>鼠标靠近切换样式</strong><br>    <br>    <ol><br>     <li id="m-5">卡片一</li><br>     <li id="m-6">卡片二</li><br>    </ol><br>   <br>    <div id="u-5"><br>     <img name="" src="http://img2.cache.netease.com/ent/2008/10/7/20081007105809a27ee.jpg" alt="" /><br>    </div><br>    <br>    <div id="u-6"><br>     <img name="" src="http://img1.cache.netease.com/ent/2008/10/28/2008102817255494129.jpg" alt="" /><br>    </div><br>   </div><br> <br>            <script type="text/javascript"><br>    <br>            var WindowVote4 = new VeryIDE.TabOption("mouseover");<br>   <br>            WindowVote4.TabClass("active","");<br>            WindowVote4.BoxClass("show","hidden");<br>   <br>            WindowVote4.Add(document.getElementById("m-5"),document.getElementById("u-5"));<br>            WindowVote4.Add(document.getElementById("m-6"),document.getElementById("u-6"));<br>      WindowVote4.Play(1);<br>            </script><br>    <br>  <br>   <div class="box"><br>    <strong>多层选项卡切换</strong><br>    <br>    <ol><br>     <li id="m-7">卡片一</li><br>     <li id="m-8">卡片二</li><br>    </ol><br>   <br>    <div id="u-7"><br>     <br>     <div class="box"><br>      <strong>卡片一切换</strong><br>      <br>      <ol><br>       <li id="m-9">子卡片一</li><br>       <li id="m-10">子卡片二</li><br>      </ol><br>     <br>      <div id="u-9"><br>       <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/20081113124851a8ef3.jpg" alt="" /><br>      </div><br>      <br>      <div id="u-10"><br>       <img name="" src="http://img1.cache.netease.com/lady/2008/11/12/200811121527103131e.jpg" alt="" /><br>      </div><br>     </div><br>     <br>    </div><br>    <br>    <div id="u-8"><br>     <br>     <div class="box"><br>      <strong>卡片二切换</strong><br>      <br>      <ol><br>       <li id="m-11">子卡片三</li><br>       <li id="m-12">子卡片四</li><br>      </ol><br>     <br>      <div id="u-11"><br>       <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/20081113124701885f4.jpg" alt="" /><br>      </div><br>      <br>      <div id="u-12"><br>       <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/2008111312471798200.jpg" alt="" /><br>      </div><br>     </div><br>     <br>    </div><br>   </div><br> <br>            <script type="text/javascript"><br>    <br>            var WindowVote5 = new VeryIDE.TabOption("click");<br>   <br>            WindowVote5.TabClass("active","");<br>   <br>   for(var i=7;i<=8;i++){<br>    WindowVote5.Add(document.getElementById("m-"+i),document.getElementById("u-"+i));<br>   }<br>      WindowVote5.Play(1);<br>   <br>   /*************************/<br>    <br>            var WindowVote6 = new VeryIDE.TabOption("click");<br>   <br>            WindowVote6.TabClass("active","");<br>   <br>   for(var i=9;i<=10;i++){<br>    WindowVote6.Add(document.getElementById("m-"+i),document.getElementById("u-"+i));<br>   }<br>      WindowVote6.Play(0);<br>   <br>   /*************************/<br>    <br>            var WindowVote7 = new VeryIDE.TabOption("click");<br>   <br>            WindowVote7.TabClass("active","");<br>   <br>   for(var i=11;i<=12;i++){<br>    WindowVote7.Add(document.getElementById("m-"+i),document.getElementById("u-"+i));<br>   }<br>      WindowVote7.Play(0);<br>            </script> <br> <br> <br>  <br>   <div class="box2"><br>    <strong>复杂切换样式</strong><br>    <br>    <ol><br>     <li id="m-13">卡片一</li><br>     <li id="m-14">卡片二</li><br>    </ol><br>   <br>    <div id="u-13"><br>     <img name="" src="http://img2.cache.netease.com/ent/2008/10/7/20081007105809a27ee.jpg" alt="" /><br>    </div><br>    <br>    <div id="u-14"><br>     <img name="" src="http://img1.cache.netease.com/ent/2008/10/28/2008102817255494129.jpg" alt="" /><br>    </div><br>    <br>    <ol><br>     <li id="m-15">卡片一</li><br>     <li id="m-16">卡片二</li><br>    </ol><br>   <br>    <div id="u-15"><br>     <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/20081113124701885f4.jpg" alt="" /><br>    </div><br>    <br>    <div id="u-16"><br>     <img name="" src="http://img2.cache.netease.com/lady/2008/11/13/2008111312471798200.jpg" alt="" /><br>    </div><br>   </div><br> <br>            <script type="text/javascript"><br>    <br>            var WindowVote8 = new VeryIDE.TabOption("mouseover");<br>   <br>            WindowVote8.TabClass("active","");<br>            WindowVote8.BoxClass("show","hidden");<br>   <br>   for(var i=13;i<=16;i++){<br>    WindowVote8.Add(document.getElementById("m-"+i),document.getElementById("u-"+i));<br>   }<br>      WindowVote8.Play(1);<br>            </script><br> <br> <br> <p>&nbsp;</p><br> <p>&nbsp;</p><br> <br></div><br></body> <br></html></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于支持多级的选项卡的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200811171087.shtml方便下次再访问哦。

·上一篇： 焦点Banner效果滚动实现效果分享
·下一篇： 鼠标滑过时，边框加粗

支持多级的选项卡

文章分类LIST >>返回首页

最新游戏

最新新闻