脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现简洁的滑动门菜单

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

 更新时间：2015年09月04日 12:21:35   作者：企鹅  
这篇文章主要介绍了js实现简洁的滑动门菜单(选项卡)效果代码,涉及javascript鼠标事件操作页面元素样式切换的实现技巧,简单实用,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JavaScript实现翻页功能(附效果图)

    JavaScript实现翻页功能(附效果图)

    这篇文章主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享JavaScript实现翻页功能实例代码，需要的朋友参考下吧
    2017-02-02
  • canvas学习之API整理笔记（一）

    canvas学习之API整理笔记（一）

    本文主要介绍了canvas的相关知识。canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。本文介绍了很多小例，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • JS实现日期加减的方法

    JS实现日期加减的方法

    这篇文章主要介绍了JS实现日期加减的方法，有需要的朋友可以参考一下
    2013-11-11
  • 谈谈impress.js初步理解

    谈谈impress.js初步理解

    impress.js 是国外一位开发者受 Prezi 启发，采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。感兴趣的朋友跟着小编一起学习吧
    2015-09-09
  • js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法

    这篇文章介绍了js 控制页面跳转的5种方法，有需要的朋友可以参考一下
    2013-09-09
  • 前端强大的图片预览组件Viewer.js使用方法

    前端强大的图片预览组件Viewer.js使用方法

    这篇文章主要给大家介绍了关于前端强大的图片预览组件Viewer.js使用方法的相关资料,Viewer.js是一款强大的图片查看器,虽然简单且易上手,但是却并不影响其在图片查看方面的强大功能,同时这款优秀的插件配置操作起来也非常的方便,需要的朋友可以参考下
    2024-01-01
  • js中DOM事件绑定分析

    js中DOM事件绑定分析

    在这篇文章中小编给大家整理了关于JS中DOM事件绑定的相关知识点，有兴趣的朋友赶快学习参考下。
    2018-03-03
  • Javascript BOM学习小结(六)

    Javascript BOM学习小结(六)

    BOM：BrowserObjectModel,浏览器对象模型，提供JS中对浏览器的各种操作的对象，是JS应用中唯一没有相关标准的部分，这事BOM经常出现问题的所在，主要用于处理浏览器窗口与框架，浏览器特有的JS扩展也被默认为BOM的一部分，而各浏览器之间的公有对象就成了默认的标准
    2015-11-11
  • js实现当鼠标移到表格上时显示这一格全部内容的代码

    js实现当鼠标移到表格上时显示这一格全部内容的代码

    下面小编就为大家带来一篇js实现当鼠标移到表格上时显示这一格全部内容的代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • java和javascript获取word文档的书签位置对比

    java和javascript获取word文档的书签位置对比

    这篇文章主要介绍了java和javascript获取word文档的书签位置代码对比,需要的朋友可以参考下
    2014-06-06

最新评论