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

2024-10-01 19:12:26

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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-simple-scroll-menu-tab-codes/

具体代码如下：

<!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程序设计有所帮助。

JS将滑动门改为选项卡（需鼠标点击）的实现方法

本文实例讲述了JS将滑动门改为选项卡(需鼠标点击)的实现方法.分享给大家供大家参考.具体如下: 大家都知道,滑动门和选项卡在布局和结构方面几乎是一样的,唯一不同的是触发方式,这个是由JavaScript决定的,大致来讲就是将onmouseover改为onclick就行了,本款选项卡以前是款比较流行的滑动门,现在改成了选项卡,大家看看有什么区别. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hdm-2-nav-tab-style-demo
js实现黑色简易的滑动门网页tab选项卡效果

本文实例讲述了js实现黑色简易的滑动门网页tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款js实现的黑色风格网页滑动门菜单,虽然简洁但看上去不失大气,稍微修改一下即可换成选项卡,懂JS的朋友可好好修改一下哦,改成你喜欢的样式. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-black-style-web-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT
js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）

本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果.实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
JS+CSS实现自适应选项卡宽度的圆角滑动门效果

本文实例讲述了JS+CSS实现自适应选项卡宽度的圆角滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS打造自适应宽度的圆角滑动门,这里的圆角主要是靠一张背景图片去实现,所指的宽度是滑动门上的导航的宽度,不管文字有多少,它都会一直顺着下去,不会被内容所撑破,兼容性方面,兼容IE6/7/8,火狐未试,应该也兼容 . 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-width-nav-tab-codes/ 具体代
JS实现同一个网页布局滑动门和TAB选项卡实例

本文实例讲述了JS实现同一个网页布局滑动门和TAB选项卡.分享给大家供大家参考.具体如下: 这里演示同一个网页布局滑动门和TAB选项卡效果,其实滑动门和选项卡没有太大的区别,无非是鼠标动作的不同而已,但是有时候在同一个网页中布局两个以上的选项卡,总容易产生混乱,导致JS出错,如果你需要这样做,那么就请参考本实例,帮你解决这个问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-hd-tab-menu-style-codes/ 具体
js实现简洁的滑动门菜单(选项卡)效果代码

本文实例讲述了js实现简洁的滑动门菜单.分享给大家供大家参考.具体如下: 一个简洁实用的网页选项卡菜单,在同一个页面中实现两个选项卡,第一个是滑动门,从布局上来说基本是相似的,第二个是选项卡,这里主要使用了Js自定义函数:tabMenu,函数功能:实现tab菜单,参数说明:tabMenu(tabBox,navClass); 参数一:tabBox(tab容器id) 参数二:navClass(当前标签样式class) 备注:依赖指定html结构. 运行效果截图如下: 在线演示地址如下: http:/
js实现的早期滑动门菜单效果代码

本文实例讲述了js实现的早期滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是传说中的早期滑动门菜单Demo代码,测试时请把鼠标放到左侧相应的导航栏目上,放在左侧菜单上的时候,你就发现玄机了,右侧的内容会跟着变化,JS与HTML结合实现的,比较传统的导航效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-old-ver-menu-cha-codes/ 具体代码如下: <HTML> <HEAD> <TI
JS实现完全语义化的网页选项卡效果代码

本文实例讲述了JS实现完全语义化的网页选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款完全语义化的JS网页选项卡,包括了两种用法,一种是点击式,另一种是滑动门式,具体用哪一种要根据你自己的需要了,滑动门是在鼠标经过时触发,选项卡则是需要鼠标点击的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-yyh-web-tab-cha-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/
JS实现黑色风格的网页TAB选项卡效果代码

本文实例讲述了JS实现黑色风格的网页TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款网页TAB选项卡JS代码,黑色超酷的风格,看了后你会喜欢的,很熟悉很经典的风格,似曾相识的感觉,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-web-tab-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition
js实现的简洁网页滑动tab菜单效果代码

本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab
JS+CSS实现简单滑动门(滑动菜单)效果

本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感觉到,每一步都有注释,对学习JavaScript和CSS都有帮助,也为你以后写出比这更漂亮.更实用的滑动门做铺垫. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jdhd-menu-style-codes/ 具体代码如下: <!DOC
JS+CSS实现自动切换的网页滑动门菜单效果代码

本文实例讲述了JS+CSS实现自动切换的网页滑动门菜单效果代码.分享给大家供大家参考.具体如下: 这是一款支持自动切换功能的网页滑动门菜单,JS与CSS结合的技术成果,有人说它是自己会切换的网页选项卡标签面板,QQ登录后弹出的每日要闻迷你窗口中有类似效果,但是代码写法却是截然不同的,每一位作者的思路是不同的,因此您多了一份参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-auto-cha-tab-menu-style-code
JS实现具备延时功能的滑动门菜单效果

本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP
JS+CSS实现简易实用的滑动门菜单效果

本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希望这款滑动门大家能够喜欢,也希望研究JS的达人一同切磋,共同提高. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/ 具体代码如下: <html> <head> <t
js实现类似菜单风格的TAB选项卡效果代码

本文实例讲述了js实现类似菜单风格的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的一组简洁选项卡代码,类似菜单风格的TAB选项卡,没有使用图片,因此有些地方处理的还不太到位,不介意使用图片修饰的朋友可以再次美化这上选项卡,风格有点类似于菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-menu-style-tab-nav-codes/ 具体代码如下: <html xmlns="ht

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

相关推荐

随机推荐