来自 计算机网络 2019-09-04 19:47 的文章
当前位置: 六合联盟网 > 计算机网络 > 正文

JS实现淡蓝色简洁竖向Tab点击切换效果,CSS实现滑

本文实例陈说了JS+CSS实现滑动切换tab菜单功用。共享给大家供大家参照他事他说加以考察。具体如下:

正文实例叙述了JS达成淡水绿简洁竖向Tab点击切换效果。分享给大家供大家参照他事他说加以考察。具体如下:

那是作风轻便的一款JS+CSS滑动门特效代码,当鼠标滑过菜单的时候,二级菜单自动切换,鼠标无需点击,滑动门效果是个比较盛行的网页菜单功用,在网上平常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测量检验通过,代码包容性还是能,自个儿用的化再美化一下作风。

这里介绍一款淡莲灰竖向简洁Tab,选项卡,是诸两个人都爱怜的一种风格。

运营作效果果截图如下:

运维效果截图如下:

图片 1

图片 2

在线演示地址如下:

在线演示地址如下:

切实代码如下:

切切实实代码如下:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" lang="zh_CN" xml:lang="zh_CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var $=function(a,b){
 var ID = document.getElementById(a);
 var OBJ= (b)?ID.getElementsByTagName(b):ID;
 return OBJ
}
var n=0;
var tab = function(MENU,BODY){
 var l = MENU.length;
 for(var i=0;i<l;i++){
  MENU[i].onmouseover=function(a){
   return function(){
    MENU[n].className="label"
    BODY[n].style.display = "none";
    MENU[a].className="label label-selected";
    BODY[a].style.display = "block";
    n=a;
   }
  }(i);
 }
}
</script>
<style>
body{font-family: "微软雅黑","SimSun","宋体","Arial Narrow";}
#header,#main,#footer{width: 1050px;background: #F1F9D9;margin: 5px auto;}
#header{height: 50px;}
#main{height: auto;}
#footer{height: 50px;}
#menu{height: 36px;padding: 2px 0 0 0;}
li{list-style: none;cursor: pointer;}
.category{margin: 0;height: 35px;border-bottom: 1px solid #b5e2f3;text-align: center;}
.label{border: 1px solid #b5e2f3;float: left;width: 100px;height: 25px;margin: 0 3px;background: #F1FEF3;padding: 9px 0 0 0;outline: 0;-moz-border-radius: 5px 5px 0 0;}
.label-selected{background: #FFF;border-bottom: 1px solid #FFF;}
#linksContent{margin-top: -1;height: 600px;padding: 10px;border: 1px solid #b5e2f3;border-top: 0;background: #FFF;}
.link{float: left;width: 180px;display: block;margin: 10px 0;}
</style>
<title>myLinks</title> 
</head>
<body>
 <div id="container">
 <div id="header"></div>
 <div id="main">
  <div id="menu">
   <ul class="category">
   <li class="label label-selected">在线学习</li>
   <li class="label">运动休闲</li>
   <li class="label">编程社区</li>
   <li class="label">文化娱乐</li>
   <li class="label">休息项目</li>
   <li class="label">人际往来</li>
  </ul>
  </div>
  <div id="linksContent">
   <div class="category-1" style="display:block;">
   <ul>
   <li class="link">html学习</li>
   <li class="link">编译原理</li>
   <li class="link">人工智能</li>
   <li class="link">算法设计</li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link">开车</li>
   <li class="link">郊游</li>
   <li class="link">音乐</li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link">MSDN</li>
   <li class="link">编译原理</li>
   <li class="link">科幻电影</li>
   <li class="link">技术文档</li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link">java学习</li>
   <li class="link">html学习</li>
   <li class="link">编译原理</li>
   <li class="link">人工智能</li>
   <li class="link">算法设计</li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link">html学习</li>
   <li class="link">编译原理</li>
   <li class="link">人工智能</li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link">java学习</li>
   <li class="link">html学习</li>
   <li class="link">算法设计</li>
   </ul>
  </div> 
  </div>
 </div>
 <div id="footer"></div>
 </div>
<script>
 tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
#lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}
.lib_tabborder_sx{border:1px solid #95C9E1;}
.lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;}
.lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
 for(i=1;i<=n;i++){
 var menu=document.getElementById(name+i);
 var con=document.getElementById("con_"+name+"_"+i);
 menu.className=i==cursel?"hover":"";
 con.style.display=i==cursel?"block":"none";
 }
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1_sx" class="lib_tabborder_sx">
<div class="lib_Menubox_sx ">
<ul>
  <li id="one1" onclick="setTab('one',1,5)" class="hover">脚本代码</li>
  <li id="one2" onclick="setTab('one',2,5)" >ASP类</li>
  <li id="one3" onclick="setTab('one',3,5)">PHP类</li>  
  <li id="one4" onclick="setTab('one',4,5)">JSP类</li>
  <li id="one5" onclick="setTab('one',5,5)">.NET类</li>
</ul>
</div>
 <div class="lib_Contentbox_sx "> 
  <div id="con_one_1" >脚本列表</div>
  <div id="con_one_2" style="display:none">ASP类更新</div>
  <div id="con_one_3" style="display:none">PHP类更新</div>
  <div id="con_one_4" style="display:none">JSP类更新</div> 
  <div id="con_one_5" style="display:none">ASP.NET类更新</div> 
 </div>
</div>
</body>
</html>

希望本文所述对我们的javascript程序设计有着协助。

指望本文所述对我们的JavaScript程序设计具备扶助。

您大概感兴趣的小说:

  • js完成点击切换TAB标签实例
  • 轻巧易行纯js达成点击切换TAB标签实例
  • JS达成淡卡其色简洁竖向Tab点击切换效果
  • JavaScript 达成 Tab 点击切换实例代码
  • javascript兑现tab切换的多样办法
  • js(JavaScript)完毕TAB标签切换效果的差没有多少实例
  • javascript贯彻tabs选项卡切换效果(自写原生js)
  • Vue.js组件tabs实现选项卡切换效果
  • 用AngularJS的指令完结tabs切换效果
  • 优质的js tab图片轮换效果代码(可自定义的幻灯片和图纸缓冲切换)
  • JavaScript兑现的轻巧Tab点击切换功效示例

你大概感兴趣的作品:

  • js达成点击切换TAB标签实例
  • 简单的说纯js落成点击切换TAB标签实例
  • JavaScript 实现 Tab 点击切换实例代码
  • javascript兑现tab切换的各种办法
  • js(JavaScript)达成TAB标签切换效果的简要实例
  • javascript贯彻tabs选项卡切换效果(自写原生js)
  • Vue.js组件tabs实现选项卡切换效果
  • 用AngularJS的指令达成tabs切换效果
  • JS+CSS实现滑动切换tab菜单作用
  • 非凡的js tab图片轮换效果代码(可自定义的幻灯片和图纸缓冲切换)
  • JavaScript落到实处的简单Tab点击切换功用示例

本文由六合联盟网发布于计算机网络,转载请注明出处:JS实现淡蓝色简洁竖向Tab点击切换效果,CSS实现滑

关键词: