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 相关文章推荐
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
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常用的小程序代码段
2015/11/14 PHP
php for 循环使用的简单实例
2016/06/02 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
Open and Print a Word Document
2007/06/15 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
2013/08/18 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
vuex如何重置所有state(可定制)
2019/01/17 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
Python httplib模块使用实例
2015/04/11 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python get获取页面cookie代码实例
2018/09/12 Python
python实现简单加密解密机制
2019/03/19 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
Python如何读写二进制数组数据
2020/08/01 Python
python中pickle模块浅析
2020/12/29 Python
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
大学自我鉴定范文
2013/12/26 职场文书
电钳工人个人求职信
2014/05/10 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
2015年专项整治工作总结
2015/04/03 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang