jsp中滑动标签的实现

最新推荐文章于 2023-01-29 11:53:34 发布

xttxqjfg

最新推荐文章于 2023-01-29 11:53:34 发布

阅读量2.4k

点赞数

分类专栏： web网页开发文章标签： jsp javascript css function stylesheet class

本文链接：https://blog.csdn.net/xttxqjfg/article/details/7872889

版权

web网页开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!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" />
<link rel="stylesheet" type="text/css" href="http://c1.neweggimages.com.cn/WebResources/2009/Default/Css/frame091107.css" />
</head>
<body>

<div class="tabContainer">
<ul class="tabHead" id="tabCot_product-li-currentBtn-">
<li class="currentBtn"><a href="javascript:void(0)" title="硬件故障类">硬件故障类</a></li>
<li><a href="javascript:void(0)" title="系统故障类">系统故障类</a></li>
<li><a href="javascript:void(0)" title="网络故障类">网络故障类</a></li>
<li><a href="javascript:void(0)" title="1故障类">1故障类</a></li>
<li><a href="javascript:void(0)" title="2故障类">2故障类</a></li>
<li><a href="javascript:void(0)" title="其他软件故障类">其他软件故障类</a></li>
</ul>
</div>

<div id="tabCot_product_1" >
111111111111111
</div>
<div id="tabCot_product_2" style="display: none;">
22222222222222
</div>
<div id="tabCot_product_3" style="display: none;">
33333333333333
</div>
<div id="tabCot_product_4" style="display: none;">
44444444444444
</div>
<div id="tabCot_product_5" style="display: none;">
55555555555555
</div>
<div id="tabCot_product_6" style="display: none;">
66666666666666
</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>

xttxqjfg

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jsp中滑动标签的实现

滑动门硬件故障类系统故障类网络故障类1故障类2故障类其他软件故障类1111111111111112222222222222233333333333333444444444444445555555555555566666666666666
复制链接

扫一扫