初学者求问，关于弹出层下面的选项卡切换有关问题
日期：2014-05-16 浏览次数：20392 次
菜鸟求问，关于弹出层上面的选项卡切换问题
昨天在论坛求来一个弹出层的效果，但是发现在层上面加上选项卡之后，当点击选项卡的时候弹出层就消失了。
我想要的效果是,点击按钮弹出一个层，然后层上面有选项卡，可以点击选项卡切换内容,再点击按钮或者页面其他地方隐藏选项卡
页面里有多个这种按钮
昨天的帖子地址http://topic.csdn.net/u/20120719/12/1bec4a8a-c379-45a6-9793-24694f22a610.html?11699
我加上tab选项卡后的代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color: transparent;" onclick="menuHide();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td height="400"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">
<div id="tabCot_product" class="tab">
<div class="tabContainer">
<ul class="tabHead" id="tabCot_product-li-currentBtn-">
<li class="currentBtn"><a href="javascript:void(0)" rel="1">tab1</a></li>
<li><a href="javascript:void(0)" rel="2">tab2</a></li>
</ul>
</div>
<div id="tabCot_product_1" class="tabCot">
<div class="tnet">111</div>
</div>
<div id="tabCot_product_2" class="tabCot" style="display: none;">
<div class="tnet">2222</div>
</div>
</div>
<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;
}
}
new tab('tabCot_product-li-currentBtn-', '-');
</script>
</div>
<div id="face2" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层22222</div>
<input type="button" value="^_^1" onClick="showFace(this,'')"><span style="width: 300px;"></span>
昨天在论坛求来一个弹出层的效果，但是发现在层上面加上选项卡之后，当点击选项卡的时候弹出层就消失了。
我想要的效果是,点击按钮弹出一个层，然后层上面有选项卡，可以点击选项卡切换内容,再点击按钮或者页面其他地方隐藏选项卡
页面里有多个这种按钮
昨天的帖子地址http://topic.csdn.net/u/20120719/12/1bec4a8a-c379-45a6-9793-24694f22a610.html?11699
我加上tab选项卡后的代码如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试</title>
</head>
<body marginwidth="0" marginheight="0" leftmargin="0" topmargin="0" style="background-color: transparent;" onclick="menuHide();">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td height="400"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>
<div id="face" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">
<div id="tabCot_product" class="tab">
<div class="tabContainer">
<ul class="tabHead" id="tabCot_product-li-currentBtn-">
<li class="currentBtn"><a href="javascript:void(0)" rel="1">tab1</a></li>
<li><a href="javascript:void(0)" rel="2">tab2</a></li>
</ul>
</div>
<div id="tabCot_product_1" class="tabCot">
<div class="tnet">111</div>
</div>
<div id="tabCot_product_2" class="tabCot" style="display: none;">
<div class="tnet">2222</div>
</div>
</div>
<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;
}
}
new tab('tabCot_product-li-currentBtn-', '-');
</script>
</div>
<div id="face2" style="position: absolute; display: none; width: 319px; height: 213px; background: green;">software group qq群：58156559<br><br><br>弹出层22222</div>
<input type="button" value="^_^1" onClick="showFace(this,'')"><span style="width: 300px;"></span>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
