javascript tab切换
来源：互联网 发布：一城一名店网络平台 编辑：程序博客网 时间：2024/05/23 01:22
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript+css tab 切换菜单效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" />
</head>
<body>
<div id="wrap">
<div id="body">
<div id="main" style="overflow:hidden;">
<div id="tabCot_product" class="tab">
<div class="tabContainer">
<label class="backTop"><a href="#" title="回到顶部">回到顶部</a></label>
<ul class="tabHead" id="tabCot_product-li-currentBtn-">
<li class="currentBtn"><a href="javascript:void(0)" title="产品描述" rel="1">产品描述</a></li>
<li><a href="javascript:void(0)" title="规格参数" rel="2">规格参数</a></li>
<li><a href="javascript:void(0)" title="包装信息" rel="3">包装信息</a></li>
<li><a href="javascript:void(0)" title="保修条款" rel="4">保修条款</a></li>
<li><a href="javascript:void(0)" title="保修条款" rel="5">保修条款</a></li>
</ul>
</div>
<div id="tabCot_product_1" class="tabCot">
<table style="border-style:none;">
<tr>
<td style="border-style:none; padding:0px;">
<p><u><b>产品概述</b></u></p>
<p></p>
</td>
</tr>
</table>
<div class="clear"></div>
</div>
<div id="tabCot_product_2" class="tabCot" style="display: none;">
<div>规格参数：<br /></div>
<div class="clear"></div>
</div>
<div id="tabCot_product_3" class="tabCot" style="display: none;">
<div></div>
<div class="clear"></div>
</div>
<div id="tabCot_product_4" class="tabCot" style="display: none;">
<div>保修条款：<br /></div>
<div class="clear"></div>
</div>
<div id="tabCot_product_5" class="tabCot" style="display: none;">
<div>保修条款：<br /></div>
<div class="clear"></div>
</div>
<div class="modBottom">
<span class="modABL"></span>
<span class="modABR"></span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="noprint">
<script type="text/javascript" language="jscript">
function tab(o, s, cb, ev){//tab切换类
var $ = function(o){return document.getElementById(o)};
var css = o.split((s||'_'));
if(css.length!=4)return;
this.event = ev || 'onmouseover';
o = $(o);
if(o){
this.ITEM = [];
o.id = css[0];
var item = o.getElementsByTagName(css[1]);
var j=1;
for(var i=0;i<item.length;i++){
if(item[i].className.indexOf(css[2])>=0 || item[i].className.indexOf(css[3])>=0){
if(item[i].className == css[2])o['cur'] = item[i];
item[i].callBack = cb||function(){};
item[i]['css'] = css;
item[i]['link'] = o;
this.ITEM[j] = item[i];
item[i]['Index'] = j++;
item[i][this.event] = this.ACTIVE;
}
}
return o;
}
}
tab.prototype = {
ACTIVE:function(){
var $ = function(o){return document.getElementById(o)};
this['link']['cur'].className = this['css'][3];
this.className = this['css'][2];
try{
$(this['link']['id']+'_'+this['link']['cur']['Index']).style.display = 'none';
$(this['link']['id']+'_'+this['Index']).style.display = 'block';
}catch(e){}
this.callBack.call(this);
this['link']['cur'] = this;
}
}
new tab('tabCot_product-li-currentBtn-', '-');
</script>
</div>
</body>
</html>
- javascript tab切换
- JavaScript - Tab切换效果
- Javascript实现Tab切换
- JavaScript Tab切换
- JavaScript tab切换
- 【JavaScript实现Tab切换】
- Tab切换--JavaScript基础
- javaScript—tab切换
- javascript实现tab菜单切换
- javascript 小练习-tab切换
- javaScript实例：tab切换效果
- JavaScript——Tab切换
- javascript实现tab切换效果
- JavaScript 动画之tab切换
- javascript实现tab切换效果
- javascript面向对象tab切换
- Tab选项卡切换效果JavaScript汇总
- 每天一个JavaScript实例-tab标签切换
- POJ 2299 Ultra-QuickSort
- 线程属性pthread_attr_t简介
- Linq to sql：事务处理
- Html5 学习系列（二）HTML5新增结构标签
- cocos2d-x的版本更换和cocos2d-x2.1.4的安装
- javascript tab切换
- 【找规律】HDU 4662——MU Puzzle
- UITableView背景，边框线设置
- XLSTransformer生成excel文件
- 忽然之间
- Android 中 Service 全面解析与使用
- B树、B-树、B+树、B*树
- Android组件间通信机制对面向对象特性的影响
- go语言有关结构体的问题
