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 相关文章推荐
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
使用JavaScript中的lodash编写双色球效果
Jun 24 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
Vue通过阿里云oss的url连接直接下载文件并修改文件名的方法
Dec 25 Vue.js
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
杏林同学录(四)
2006/10/09 PHP
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
Joomla开启SEF的方法
2016/05/04 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
Javascript封装DOMContentLoaded事件实例
2014/06/12 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
2017/01/23 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
使用electron将vue-cli项目打包成exe的方法
2018/09/29 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
mac下pycharm设置python版本的图文教程
2018/06/13 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python利用dlib获取人脸的68个landmark
2019/11/27 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
CSS3实现圆角、阴影、透明效果并兼容各大浏览器
2014/08/08 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
优秀团队获奖感言
2014/02/19 职场文书
趣味运动会广播稿
2014/09/13 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
幼儿园老师新年寄语
2015/08/17 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
python+opencv实现目标跟踪过程
2022/06/21 Python