js+css实例超漂亮tab切换选项卡代码

时间：2022-07-02 14:59:34 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

js+<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>实例超漂亮tab切换选项卡代码
<!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>SAMSUNG 三星 943NW+PLUS 19英寸 宽屏液晶显示器 黑色 - 新蛋中国</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<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>
	</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>产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br />产品概述内容..........<br /></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 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 || 'onclick';
	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;
	}
}
/*
	tab 使用方法:
		new tab(标签ID, id分隔符, 单击事触发函数, 什么事件触发TAB切换);
			标签ID:							ID命名格式为: 前缀+分隔符+TAB标签的HTML标签名+激活状态下标签样式+分隔符+非激活状态下标签样式(必须)
			id分隔符:						分隔符(必须)
			TAB切换时触发函数:	TAB切换时触发函数(可选)
			什么事件触发TAB切换:可选(默认为onclick)
			注:	标签ID命名时的前缀将做为 该标签的新ID值,所以前缀不要与现在任何元素的ID值相同.
		返回值为: 标签ID所对象的对象.
		切换标签时对应的 项目名称命名规则:
			前缀+_+顺序值
			具体理解,可以看上面的代码,比如
			ID为 "test3_li_now_" 的对象代表的意思是:
				前缀为 test3
				li	为 id为 "test3_li_now_" 标签下面的 li 标签 做为TAB项.
				now	为 标签激活时的样式
				""	最后的空为 非激活状态下的样式
			每个标签项 激活 状态下对应的元素的ID应该命名为:
				test3_1		第一个标签项对应项目
				test3_2		第二个标签项对应项目
				test3_3		第三个标签项对应项目
				等等
*/
new tab('tabCot_product-li-currentBtn-', '-');
</script>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js+css实例超漂亮tab切换选项卡代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程