注册 | 登陆

您的位置：阿里西西 > 网页特效 > 页面特效 > 详细内容

3顶

选项卡做法

稿源：互联网 2022-05-12 15:49:57 点击： 5776 撤稿纠错

选项卡效果，可自定义，熟悉css的朋友可任意修改样式。

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

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

<style><br>.box{width:204px;padding-bottom:10px;}<br>.boxNav ul{ padding:0; margin:0;}<br>.boxNav ul li{width:100px; border:1px solid #444444; float:left; cursor:pointer; text-align:center; font-size:12px;}<br>.boxContent{width:202px; border:1px dashed #444444;}<br>.normaltab{color:#FF0000; font-weight:bold; background-color:#FFFFFF; display:block;}<br>.hovertab{color:#444444; font-weight:400; display:block; background-color:#CCCCCC;}<br>.see{display:block;}<br>.nosee{display:none;}<br></style><br><script language="javascript"><br>function $(id){return document.getElementById(id);}<br>function clickNav(n){<br> for(i=1;i<=2;i++){<br> $('boxNav'+i).className='normaltab';<br> $('boxContent'+i).className='nosee';<br>  }<br> $('boxNav'+n).className='hovertab';<br> $('boxContent'+n).className='see';<br> <br>}<br>function showbox(){<br>     if($('smallbox').checked==true){<br>      $('aa').style.display='none';<br>     }else{<br>      $('aa').style.display='block';<br>    }<br>}<br>//function btnbox(){<br>//    if($('bb').style.display=='block';){<br>//      $('btn').value='隐藏';<br>//      }else{<br>//      $('btn').value='显示';<br>//     $('bb').style.display='none';<br>//     }<br>//<br>//}<br>function hhh()<br>{<br> if($("bb").style.display=="block")<br> {    <br>  $("bb").style.display="none";<br>  $("btn").value="显示";<br>    }else<br>    {      <br>  $("bb").style.display="block";<br>  $("btn").value="隐藏";<br> }<br>}<br></script><br><div class="box"><br>   <div class="boxNav" id="boxNav"><br>     <ul><br>  <li id="boxNav1" class="hovertab" onmouseover="clickNav(1)">钱袋</li><br>  <li id="boxNav2" class="normaltab" onmouseover="clickNav(2)">商务</li><br>  </ul><br>   </div><br>   <br>   <div class="boxContent"><br>       <div class="see" id="boxContent1"><br>    <ul><br>    <li>aaaaaaa</li><br>    <li>bbbbbbb</li><br>    <li>ccccccc</li><br>    </ul><br> </div><br>    <div class="nosee" id="boxContent2"><br>    <ul><br>    <li>ddddddd</li><br>    <li>eeeeeee</li><br>    <li>fffffff</li><br>    </ul><br> </div><br>   </div><br></div></font><br><a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

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

·上一篇： 用css实现网站换肤
·下一篇： vml制作的圆角表格

相关阅读

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

最新游戏

更多 »

最新新闻

更多 »