新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

这是一款滑动门代码

正文实例呈报了js达成简洁的TAB滑动门效果代码。共享给咱们供大家仿照效法。具体如下:

那是一款滑动门代码,简洁TAB,轻便的鼠标导航功用,大家大概常常看看的作用啊,鼠标放在主菜单上,上边框架内的故事情节会随之转换,鼠标不须要点击,只须要滑上去就可切换内容,像一扇门,所以一时外人叫“滑动门”菜单。

运营效果如下图所示:

图片 1

在线演示地址如下:

现实代码如下:

<html>
<head>
 <title>简洁TAB</title>
 <script type="text/javascript">
 function nTabs(thisObj, Num) {
  if (thisObj.className == "active") return;
  var tabObj = thisObj.parentNode.id;//赋值指定节点的父节点的id名字
  var tabList = document.getElementById(tabObj).getElementsByTagName("li");
  for (i = 0; i < tabList.length; i  ) {//点击之后,其他tab变成灰色,内容隐藏,只有点击的tab和内容有属性
  if (i == Num) {
   thisObj.className = "active";
   document.getElementById(tabObj   "_Content"   i).style.display = "block";
  } else {
   tabList[i].className = "normal";
   document.getElementById(tabObj   "_Content"   i).style.display = "none";
  }
  }
 }
 </script>
 <style type="text/css">
 *
 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
 }
 .nTab
 {
  width: 500px;
  height:200px;
  margin: 20px auto;
  border: 1px solid #333;
  overflow: hidden;
 }
 .none
 {
  display: none;
 }
 .nTab .TabTitle li
 {
  float: left;
  cursor: pointer;
  height: 35px;
  line-height: 35px;
  font-weight: bold;
  text-align: center;
  width: 124px;
 }
 .nTab .TabTitle li a
 {
  text-decoration: none;
 }
 .nTab .TabTitle .active
 {
  background-color:blue;
  color: #336699;
 }
 .nTab .TabTitle .normal
 {
  color: #F1AC1C;
 }
 .nTab .TabContent
 {
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 5px;
  display: block;
  height:100px;
 }
 </style>
</head>
<body>
 <div class="nTab">
 <div class="TabTitle">
  <ul id="myTab">
  <li class="active" onmouseover="nTabs(this,0);">ASP</li>
  <li class="normal" onmouseover="nTabs(this,1);">PHP2</li>
  <li class="normal" onmouseover="nTabs(this,2);">PHP3</li>
  <li class="normal" onmouseover="nTabs(this,3);">PHP4</li>
  </ul>
 </div>
 <div class="TabContent" >
  <div id="myTab_Content0">
  第一块内容</div>
  <div id="myTab_Content1" class="none">
  第二块内容</div>
  <div id="myTab_Content2" class="none">
  第三块内容</div>
  <div id="myTab_Content3" class="none">
  第四块内容</div>
 </div>
 </div>
</body>
</html>

可望本文所述对大家的JavaScript程序设计有着帮忙。

您或许感兴趣的稿子:

  • JS仿天猫达成的简便滑动门效果代码
  • JS CSS完毕自动切换的网页滑动门菜单成效代码
  • JS CSS实现轻松滑动门(滑动菜单)效果
  • JS完成的简要纵向滑动菜单(滑动门)效果
  • JS CSS完结简易的滑动门效果代码
  • JS CSS实现带小三角指导的滑动门效果
  • js实现左边网页tab滑动门效果代码
  • JS CSS完结自适应选项卡宽度的圆角滑动门效果
  • JS实现同多个网页布局滑动门和TAB选项卡实例
  • JS将滑动门改为选项卡(需鼠标点击)的兑现情势
  • JS落成完美的淡深铁蓝滑动门效果代码
  • JS达成滑动门效果的主意详解

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:这是一款滑动门代码

您可能还会对下面的文章感兴趣: