一段简洁大方的Tab菜单选项卡的JS特效代码

稿源：互联网 2018-09-27 02:09:05 点击： 17515 撤稿纠错

一段非常简洁的选项卡网页特效代码，响应速度极快，应用简单，运行看看吧。

以下讨论的是和Tab 选项卡菜单相关的一段简洁大方的Tab菜单选项卡的JS特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>阿里西西 Tab选项卡特效 js.alixixi.com</title>
<style type="text/css">
*{margin:0; padding:0; font-size:14px;}
#tablit {margin:50px;width:269px; height:400px; border:#BCE2F3 1px solid;padding-top:10px;background:#E4F2FB;}
#tablit dl{ float:left; width:298px;}
#tablit dl dt{float:left;border-bottom:#64B8E4 1px solid; width:15px; height:31px; line-height:30px;}
#tablit dl dd{float:left;width:110px;height:30px; line-height:30px; text-align:center;}
#tablit .on{border:#64B8E4 1px solid;border-bottom:#FFF 1px solid; color:#FF6600;background:#FFF;}
#tablit .out{border:#64B8E4 1px solid; color:#000;background:#64B8E4;}
.tabcon{width:100%; height:365px; background: #FFF; clear:both;}
.dis{display:none;}
</style>
</head>

<body>
<div id="tablit">
    <dl>
        <dt></dt>
        <dd class="on">阿里西西模板</dd>
        <dt></dt>
        <dd class="out">阿里西西特效</dd>
        <dt></dt>
    </dl>
 <div class="tabcon">模板网址 moban.alixixi.com</div>
    <div class="tabcon dis">特效网址 js.alixixi.com</div>
</div>
</body>

<script type="text/javascript">

var mDD = document.getElementById("tablit").getElementsByTagName("dd");
var mDIV= document.getElementById("tablit").getElementsByTagName("div");


for (var i=0;i<mDD.length;i++){
 (function(index) {
  mDD[index].onmouseover = function() {
   if (mDD[index].className == 'out') {
    for (var j = 0; j < mDD.length; j++) {
     mDD[j].className = 'out';
     mDIV[j].style.display = 'none';
    }
    mDD[index].className = 'on';
    mDIV[index].style.display = 'block';
   }
  }

 })(i);
}

</script>

</html>

关于一段简洁大方的Tab菜单选项卡的JS特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018092782558.shtml方便下次再访问哦。

·上一篇： 原生js编写的浏览器安全色网页拾色器色盘生成颜色代码
·下一篇： fixed仿淘宝商品列表顶部浮动工具栏效果特效

一段简洁大方的Tab菜单选项卡的JS特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻