Javascript写的Tab标签菜单（函数版）
原生javascript写的Tab菜单（函数版），函数功能：实现tab菜单，一个页面可以多次调用，希望各位点评+修改，使其更加牛X，函数说明：tabMenu(tabBox,navClass);
参数一：tabBox （tab容器id）
参数二：navClass （当前标签样式class）
备注：依赖指定html结构
当前位置：编程学习 > JS >>
tabMenu(tabBox,navClass);
参数一：tabBox （tab容器id）
参数二：navClass （当前标签样式class）
备注：依赖指定html结构
tabMenu(tabBox,navClass);
参数一：tabBox （tab容器id）
参数二：navClass （当前标签样式class）
备注：依赖指定html结构
答案：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Javascript写的Tab标签菜单</title>
<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">
/*
Author:wubai QQ:464216089 By:2012.4.7
*/
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">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="tabCon">
<div class="tCon" style="display:block">新闻新闻新闻</div>
<div class="tCon">体育体育体育</div>
<div class="tCon">财经财经财经</div>
</div>
</div>
<!--demo2-->
<div id="tabBox2" class="tabBox">
<ul class="tabTag">
<li class="active">新闻</li>
<li>体育</li>
<li>财经</li>
</ul>
<div class="tabCon">
<div class="tCon" style="display:block">新闻新闻新闻</div>
<div class="tCon">体育体育体育</div>
<div class="tCon">财经财经财经</div>
</div>
</div>
</body>
</html>上一个：全兼容的CSS按钮滑动门
下一个：风格清新的CSS导航菜单
- 更多JS疑问解答：
- 几个验证11位手机号码格式的js代码
- js如何获得FCKeditor控件的值
- 用js限制投票的cookie .目前设置的为：<input type="" class="" onclick="'window.location...
- JS验证，这块“牛皮”反复修改都不能实现
- 在JS中使用DOM模型
- 如何用JS 获取本地文件夹的文件列表
- js中new 了两个Object数组。怎么样将数组内容合并，重复的内容？
- 求实现自动生成图片缩略图的JS代码
- JS脚本网页问题
- js，代码中"object"和"Object"区别？
- js+flash实现网页图片切换效果，出现边框，单击激活此控件。
- JS怎样操作PHP中的参数
- js 怎么在一打开页面就加载这个函数。
- Date.parse()的问题(js)
- <script src="/{maxcms:sitepath}js/common.js"></script>是什么意思