js实现简洁的滑动门菜单(选项卡)效果代码


Posted in Javascript onSeptember 04, 2015

本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下:

一个简洁实用的网页选项卡菜单,在同一个页面中实现两个选项卡,第一个是滑动门,从布局上来说基本是相似的,第二个是选项卡,这里主要使用了Js自定义函数:tabMenu,函数功能:实现tab菜单,参数说明:tabMenu(tabBox,navClass);

参数一:tabBox(tab容器id)
参数二:navClass(当前标签样式class)
备注:依赖指定html结构。

运行效果截图如下:

js实现简洁的滑动门菜单(选项卡)效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的选项卡菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
ul,li{margin:0;padding:0;}
.tabBox{width:268px;margin:20px;}
ul.tabTag{height:28px;border-bottom:1px solid #000;list-style:none}
ul.tabTag li{float:left;line-height:27px;height:27px;padding:0 18px;color:#ccc;border:1px solid #ccc;border-bottom:none;margin-right:5px;background:#fff;cursor:pointer;}
ul.tabTag li.active{border-color:#000;background:#eee;color:red;position:relative;top:1px;}
.tabCon{border:1px solid #000;border-top:none;background:#fff;}
.tCon{display:none;background:#eee;padding:25px;}
</style>
<script type="text/javascript"> 
 function tabMenu(tabBox,navClass){
  var tabNavLi=document.getElementById(tabBox).getElementsByTagName("ul")[0].getElementsByTagName("li");
  var tabCon=document.getElementById(tabBox).getElementsByTagName("div")[0].getElementsByTagName("div");
  var tabLens=tabCon.length;
  for(var i=0;i<tabLens;i++){
  //应用js闭包传入参数i作为当前索引值赋值给m
   (function(m){
   tabNavLi[m].onmouseover = function(){
    for(var j=0; j<tabLens; j++){
     tabNavLi[j].className = (j==m)?navClass:"";
     tabCon[j].style.display = (j==m)?"block":"";
    }
   }
   })(i);
  }
 }
//函数调用
window.onload=function(){
 tabMenu("tabBox1","active");
 tabMenu("tabBox2","active");
}
</script>
</head>
<body>
<!--demo1-->
<div id="tabBox1" class="tabBox">
 <ul class="tabTag">
  <li class="active">新闻1</li>
  <li>体育1</li>
  <li>财经1</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新闻1内容</div>
  <div class="tCon">体育1内容</div>
  <div class="tCon">财经1内容</div>
 </div>
</div>
<!--demo2-->
<div id="tabBox2" class="tabBox">
 <ul class="tabTag">
  <li class="active">新闻2</li>
  <li>体育2</li>
  <li>财经2</li>
 </ul>
 <div class="tabCon">
  <div class="tCon" style="display:block">新闻2内容</div>
  <div class="tCon">体育2内容</div>
  <div class="tCon">财经2内容</div>
 </div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
js仿网易表单及时验证功能
Mar 07 Javascript
React优化子组件render的使用
May 12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
Sep 04 #Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 #Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 #Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 #Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 #Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 #Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 #Javascript
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
PHP获取文件绝对路径的代码(上一级目录)
2011/05/29 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
2015/06/25 Javascript
JavaScript实战之菜单特效
2016/08/16 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
Python中的choice()方法使用详解
2015/05/15 Python
Python变量和数据类型详解
2017/02/15 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Selenium定时刷新网页的实现代码
2018/10/31 Python
python getopt模块使用实例解析
2019/12/18 Python
事业单位请假制度
2014/01/13 职场文书
业务总经理岗位职责
2014/02/03 职场文书
《母亲的恩情》教学反思
2014/02/13 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
银行进社区活动总结
2014/07/07 职场文书
简单租房协议书范本
2014/08/20 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
使用CSS连接数据库的方式
2022/02/28 HTML / CSS
Pycharm远程调试和MySQL数据库授权问题
2022/03/18 MySQL