JS+CSS实现滑动切换tab菜单效果

更新时间：2015年08月25日 10:22:48 作者：企鹅

这篇文章主要介绍了JS+CSS实现滑动切换tab菜单效果,涉及javascript鼠标事件及页面元素样式的动态切换效果实现技巧,需要的朋友可以参考下

本文实例讲述了JS+CSS实现滑动切换tab菜单效果。分享给大家供大家参考。具体如下：

这是风格简单的一款JS+CSS滑动门特效代码，当鼠标滑过菜单的时候，二级菜单自动切换，鼠标不需要点击，滑动门效果是个比较流行的网页菜单效果，在网上经常可看到这种菜单的身影。本菜单在火狐、IE8、Chrome下测试通过，代码兼容性还可以，自己用的化再美化一下风格。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-move-cha-tab-menu-style-codes/

具体代码如下：

<!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"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>开车</span></li>
   <li class="link"><span>郊游</span></li>
   <li class="link"><span>音乐</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>MSDN</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>科幻电影</span></li>
   <li class="link"><span>技术文档</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java学习</span></li>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>编译原理</span></li>
   <li class="link"><span>人工智能</span></li>
   </ul>
  </div>
  <div class="category-2" style="display:none;">
   <ul>
    <li class="link"><span>java学习</span></li>
   <li class="link"><span>html学习</span></li>
   <li class="link"><span>算法设计</span></li>
   </ul>
  </div> 
  </div>
 </div>
 <div id="footer"></div>
 </div>
<script>
 tab($("menu","li"),$("linksContent","div"));
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

Javascript基础学习之十个重要问题
本文特别适合正在寻找Javascript开发工作的初学者。再搜索了许多Javascript面试问题后，发现这10个知识点很重要。让我们一起深入研究一下
2021-12-12
JavaScript中arguments的使用方法
这篇文章主要介绍了JavaScript中arguments的使用方法，arguments 是一个对应于传递给函数的参数的类数组对象。下文详细介绍，需要的小伙伴可以参考一下
2022-05-05
js 判断浏览器类型去全角、半角空格自动关闭当前窗口
去全角、半角空格自动关闭当前窗口等实现函数。
2009-04-04
一文搞懂Map与Set的用法和区别解析
这篇文章主要介绍了一文搞懂Map与Set的用法和区别,文章开头给大家介绍了map和set的基本概念，了解这些基础知识能够帮助我们更好的使用，需要的朋友可以参考下
2022-06-06
JS仿淘宝实现的简单滑动门效果代码
这篇文章主要介绍了JS仿淘宝实现的简单滑动门效果,可实现按字母分类滑动切换的功能,非常简单实用,需要的朋友可以参考下
2015-10-10
Webpack4+Babel7+ES6兼容IE8的实现
这篇文章主要介绍了Webpack4+Babel7+ES6兼容IE8的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
JavaScript实现微信飞机大战游戏
这篇文章主要为大家详细介绍了JavaScript实现微信飞机大战游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
输入npm run xxx后执行原理深入解析
这篇文章主要为大家介绍了输入npm run xxx后执行原理深入解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
如何使用ImageDecoder API让GIF图片暂停播放
在本文中，我们介绍了如何使用ImageDecoder API来暂停GIF图像的播放，虽然这需要一些JavaScript编程知识，但它是一个非常强大的技术，可以让您对GIF图像进行各种高级操作，感兴趣的朋友跟随小编一起看看吧
2023-06-06
Openlayers学习之地图比例尺控件
这篇文章主要为大家详细介绍了Openlayers学习之地图比例尺控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09

JS+CSS实现滑动切换tab菜单效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具