用JS实现的tab选项卡。在页面中用过一次,怎么在第二个层用呢。 CSS代码如下:
JS代码如下:<scripttype="text/javascript">functionnTabs(thisObj,Num){if(thisObj.className=...
JS代码如下:
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
html代码
<div style="text-align:center; width:900px; height:120px; margin-top:10px;">
<!-- 选项卡开始 -->
<div class="nTab">
<!-- 标题开始 -->
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);"><a href="" target="_blank" class="right-link">最新职位</a></li>
<li class="normal" onmouseover="nTabs(this,1);">市场销售</li>
<li class="normal" onmouseover="nTabs(this,2);">人事行政</li>
<li class="normal" onmouseover="nTabs(this,3);">财务会计</li>
<li class="normal" onmouseover="nTabs(this,4);">饲料工厂</li>
<li class="normal" onmouseover="nTabs(this,5);">售后服务</li>
<li class="normal"><a href="" target="_blank"><font color=red>更多职位...</a>
</li>
</div>
<!-- 内容开始 -->
<div class="TabContent">
<div id="myTab0_Content0">
<div class="list">
<div class="nr">
<span><font color=green>岗位:</font></span>
<a href="" target="_blank">项目经理</a>
<span></span>
</div>
<div class="nr">
<span>公司:</span>
<a href="" target="_blank" >公司名称</a>
<br>
<span class=""><font color=red>待遇:</font> 5000</span>
</div>
</div>
</div>
<div id="myTab0_Content1" class="none"><font color=red size=20px>这里是市场销售职位列表</font></div>
<div id="myTab0_Content2" class="none"><font color=red size=20px>这里是人事行政职位列表</font></div>
<div id="myTab0_Content3" class="none"><font color=red size=20px>这里是财务会计职位列表</font></div>
<div id="myTab0_Content4" class="none"><font color=red size=20px>这里是饲料工厂职位列表</font></div>
<div id="myTab0_Content5" class="none"><font color=red size=20px>这里是售后服务职位列表</font></div>
</div>
</div>
<!-- 选项卡结束 -->
</div>
现在我要在第二个DIV 里用。怎么写呢 展开
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>
html代码
<div style="text-align:center; width:900px; height:120px; margin-top:10px;">
<!-- 选项卡开始 -->
<div class="nTab">
<!-- 标题开始 -->
<div class="TabTitle">
<ul id="myTab0">
<li class="active" onmouseover="nTabs(this,0);"><a href="" target="_blank" class="right-link">最新职位</a></li>
<li class="normal" onmouseover="nTabs(this,1);">市场销售</li>
<li class="normal" onmouseover="nTabs(this,2);">人事行政</li>
<li class="normal" onmouseover="nTabs(this,3);">财务会计</li>
<li class="normal" onmouseover="nTabs(this,4);">饲料工厂</li>
<li class="normal" onmouseover="nTabs(this,5);">售后服务</li>
<li class="normal"><a href="" target="_blank"><font color=red>更多职位...</a>
</li>
</div>
<!-- 内容开始 -->
<div class="TabContent">
<div id="myTab0_Content0">
<div class="list">
<div class="nr">
<span><font color=green>岗位:</font></span>
<a href="" target="_blank">项目经理</a>
<span></span>
</div>
<div class="nr">
<span>公司:</span>
<a href="" target="_blank" >公司名称</a>
<br>
<span class=""><font color=red>待遇:</font> 5000</span>
</div>
</div>
</div>
<div id="myTab0_Content1" class="none"><font color=red size=20px>这里是市场销售职位列表</font></div>
<div id="myTab0_Content2" class="none"><font color=red size=20px>这里是人事行政职位列表</font></div>
<div id="myTab0_Content3" class="none"><font color=red size=20px>这里是财务会计职位列表</font></div>
<div id="myTab0_Content4" class="none"><font color=red size=20px>这里是饲料工厂职位列表</font></div>
<div id="myTab0_Content5" class="none"><font color=red size=20px>这里是售后服务职位列表</font></div>
</div>
</div>
<!-- 选项卡结束 -->
</div>
现在我要在第二个DIV 里用。怎么写呢 展开
2个回答
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询