您的位置：首页 > 其它

javscript__Tab切换

2015-07-04 12:02 387 查看






完整代码：



<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<style>
ul{padding:0;margin:0;list-style: none;}
.tab{width: 400px;}
.tab-menuWraper{padding-left: 20px;}
.tab-menuWraper li{
float: left;
display: inline-block;
padding:5px;
border: 1px solid #333;
border-bottom: none;
margin-right: 5px;
}
.tab-contentWraper{
border: 1px solid #333;
clear: left;
padding: 5px;
}
</style>
</head>
<body>
<!-- 复杂点的结构 -->
<div class="tab J_tab">
<ul class="tab-menuWraper">
<li class="J_tab-menu">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contentWraper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>abc</li>
</ul>
</div>
<div class="J_tab-content" style="display:none">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none">content3</div>
</div>
</div>
<br>
<!-- 复杂点的结构 -->
<div class="tab J_tab">
<ul class="tab-menuWraper">
<li class="J_tab-menu">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contentWraper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>abc</li>
</ul>
</div>
<div class="J_tab-content" style="display:none">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none">content3</div>
</div>
</div>
</body>

<script type="text/javascript">
// 创建命名空间
var GLOBAL = {};
GLOBAL.namespace = function (str) {
var arr = str.split(".");
var o = GLOBAL;
for(i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++){
o[arr[i]] = o[arr[i]] || {};
o = o[arr[i]];
};
}
GLOBAL.namespace("Dom");
// 获取类名
GLOBAL.Dom.getElementsByClassName = function (str, root, tag) {
if (root) {
root = typeof root == "string" ? document.getElementById(root) : root;
}else{
root = document.body;
}
tag = tag || "*";
var els = root.getElementsByTagName(tag);
var arr = [];
for(var i = 0, n = els.length; i < n; i++){
for(var j=0, k=els[i].className.split(" "), l=k.length; j<l; j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
function setTab (root) {
var tabMenus = GLOBAL.Dom.getElementsByClassName("J_tab-menu",root);
var tabContents = GLOBAL.Dom.getElementsByClassName("J_tab-content",root);
for(var i = 0; i < tabMenus.length; i++){
tabMenus[i]._index = i;
tabMenus[i].onclick = function(){
for(var j = 0; j < tabContents.length; j++){
tabContents[j].style.display = "none";
}
tabContents[this._index].style.display = "block";
}
}
}
var tabs = GLOBAL.Dom.getElementsByClassName("J_tab");
for(var i = 0; i < tabs.length; i++){
setTab(tabs[i]);
}
</script>

加了tab高亮后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换</title>
<style>
ul{padding:0;margin:0;list-style: none;}
.tab{width: 400px;}
.tab-menuWraper{padding-left: 20px;}
.tab-menuWraper li{
float: left;
display: inline-block;
padding:5px;
border: 1px solid #333;
border-bottom: none;
margin-right: 5px;
}
.tab-contentWraper{
border: 1px solid #333;
clear: left;
padding: 5px;
}
/*高亮*/
.tab .tab-currentMenu{ background-color: #333;color: #fff;}
.underLine{ text-decoration: underline;}
</style>
</head>
<body>
<!-- 复杂点的结构 -->
<div class="tab J_tab">
<ul class="tab-menuWraper">
<li class="J_tab-menu tab-currentMenu">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu underLine">menu3</li>
</ul>
<div class="tab-contentWraper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>abc</li>
</ul>
</div>
<div class="J_tab-content" style="display:none">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none">content3</div>
</div>
</div>
<br>
<!-- 复杂点的结构 -->
<div class="tab J_tab">
<ul class="tab-menuWraper">
<li class="J_tab-menu tab-currentMenu">menu1</li>
<li class="J_tab-menu">menu2</li>
<li class="J_tab-menu">menu3</li>
</ul>
<div class="tab-contentWraper">
<div class="J_tab-content">
<div>content1</div>
<ul>
<li>abc</li>
</ul>
</div>
<div class="J_tab-content" style="display:none">
<p>content2</p>
<div>abc</div>
</div>
<div class="J_tab-content" style="display:none">content3</div>
</div>
</div>
</body>
<script type="text/javascript">
// 创建命名空间
var GLOBAL = {};
GLOBAL.namespace = function (str) {
var arr = str.split(".");
var o = GLOBAL;
for(i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++){
o[arr[i]] = o[arr[i]] || {};
o = o[arr[i]];
};
}
GLOBAL.namespace("Dom");
// 获取类名
GLOBAL.Dom.getElementsByClassName = function (str, root, tag) {
if (root) {
root = typeof root == "string" ? document.getElementById(root) : root;
}else{
root = document.body;
}
tag = tag || "*";
var els = root.getElementsByTagName(tag);
var arr = [];
for(var i = 0, n = els.length; i < n; i++){
for(var j=0, k=els[i].className.split(" "), l=k.length; j<l; j++){
if(k[j] == str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
// 追加类名
GLOBAL.Dom.addClass=function (node,str){
if(!new RegExp("(^|\\s+)" + str).test(node.className)){
node.className = node.className + " " + str;
}
}
// 删除固定类名
GLOBAL.Dom.removeClass = function (node,str){
node.className = node.className.replace(RegExp("(^|\\s+)"+str),"");
}
function setTab (root) {
var tabMenus = GLOBAL.Dom.getElementsByClassName("J_tab-menu",root);
var tabContents = GLOBAL.Dom.getElementsByClassName("J_tab-content",root);
for(var i = 0; i < tabMenus.length; i++){
tabMenus[i]._index = i;
tabMenus[i].onclick = function(){
for(var j = 0; j < tabContents.length; j++){
tabContents[j].style.display = "none";
}
tabContents[this._index].style.display = "block";

// 如果有当前选中标签，则去掉"tab-currentMenu"
var currentMenu = GLOBAL.Dom.getElementsByClassName("tab-currentMenu",root)[0];
if(currentMenu){
GLOBAL.Dom.removeClass(currentMenu,"tab-currentMenu");
}

// 给当前被点击的按钮挂上当前选中的class
GLOBAL.Dom.addClass(this,"tab-currentMenu");
}
}
}
var tabs = GLOBAL.Dom.getElementsByClassName("J_tab");
for(var i = 0; i < tabs.length; i++){
setTab(tabs[i]);
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Tab切换
相关文章推荐
新的分享
章节导航