87,904
社区成员
发帖
与我相关
我的任务
分享如何动态实现动态切换选项卡
<div class="news" style='padding-right:8px; padding-top:5px;'>
<h1 class="newstop">招聘中心</h1>
<div class="newscon">
<!--新闻媒体报导-公司新闻-企业公告，选项卡-->
<ul id="news-tab" class="news-nav">
<li class='first active'>
<label>{PE.Label id="取得节点名称" nodeId="24" /}</label>
<A class='more' title='医药/医疗/生物' href='{PE.Label id="取得节点链接路径" nodeId="24" /}'></A>
<ul class='cont1'>
<li><a><strong><span class='title'>企业名称</span><span class='theime'>地址</span><span class='theime2'>职位</span><span class='title1'>年薪</span></a></strong></li>
{PE.Label id="首页_招聘中心" nodeids="24" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="25" /}</label>
<A class='more' title='房地产/建筑' href='{PE.Label id="取得节点链接路径" nodeId="25" /}'></A>
<ul class='cont1'>
<li><a><strong><span class='title'>企业名称</span><span class='theime'>地址</span><span class='theime2'>职位</span><span class='title1'>年薪</span></a></strong></li>
{PE.Label id="首页_招聘中心" nodeids="25" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="23" /}</label>
<A class='more' title='工业\机械\制造' href='{PE.Label id="取得节点链接路径" nodeId="23" /}'></A>
<ul class='cont1'>
<li><a><strong><span class='title'>企业名称</span><span class='theime'>地址</span><span class='theime2'>职位</span><span class='title1'>年薪</span></a></strong></li>
{PE.Label id="首页_招聘中心" nodeids="23" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="26" /}</label>
<A class='more' title='其他行业' href='{PE.Label id="取得节点链接路径" nodeId="26" /}'></A>
<ul class='cont1'>
<li><a><strong><span class='title'>企业名称</span><span class='theime'>地址</span><span class='theime2'>职位</span><span class='title1'>年薪</span></a></strong></li>
{PE.Label id="首页_招聘中心" nodeids="26" ts="7" /}
</ul>
</li>
</ul>
</div>
<div class="newsbottom"></div>
</div>
<div class="news" style='padding-top:5px;'>
<h1 class="newstop">求职中心</h1>
<div class="newscon">
<!--新闻媒体报导-公司新闻-企业公告，选项卡-->
<ul id="news-tab" class="q1 news-nav">
<li class='first active'>
<label>{PE.Label id="取得节点名称" nodeId="19" /}</label>
<A class='more' title='医药/医疗/生物' href='{PE.Label id="取得节点链接路径" nodeId="19" /}'></A>
<ul class='cont1'>
<strong><a>
<div style='float:left; width:25px;'> </div>
<div class='xing1'>姓名</div>
<div class='xing1'>学历</div>
<div class='xing1'>目标职位</div>
<div class='chushneg1'>期望年薪</div>
</a></strong> {PE.Label id="首页_求职中心" nodeids="19" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="21" /}</label>
<A class='more' title='房地产/建筑' href='{PE.Label id="取得节点链接路径" nodeId="21" /}'></A>
<ul class='cont1'>
<strong><a>
<div style='float:left; width:25px;'> </div>
<div class='xing1'>姓名</div>
<div class='xing1'>学历</div>
<div class='xing1'>目标职位</div>
<div class='chushneg1'>期望年薪</div>
</a></strong> {PE.Label id="首页_求职中心" nodeids="21" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="35" /}</label>
<A class='more' title='工业/机械/制造' href='{PE.Label id="取得节点链接路径" nodeId="35" /}'></A>
<ul class='cont1'>
<strong><a>
<div style='float:left; width:25px;'> </div>
<div class='xing1'>姓名</div>
<div class='xing1'>学历</div>
<div class='xing1'>目标职位</div>
<div class='chushneg1'>期望年薪</div>
</a></strong> {PE.Label id="首页_求职中心" nodeids="35" ts="7" /}
</ul>
</li>
<li>
<label>{PE.Label id="取得节点名称" nodeId="22" /}</label>
<A class='more' title='其他行业' href='{PE.Label id="取得节点链接路径" nodeId="22" /}'></A>
<ul class='cont1'>
<strong><a>
<div style='float:left; width:25px;'> </div>
<div class='xing1'>姓名</div>
<div class='xing1'>学历</div>
<div class='xing1'>目标职位</div>
<div class='chushneg1'>期望年薪</div>
</a></strong> {PE.Label id="首页_求职中心" nodeids="22" ts="7" /}
</ul>
</li>
</ul>
</div>
<div class="newsbottom"></div>
</div>
</div>
如上，我的两个界面的id是一样的，现在我想把它们都各自实现选项卡切换，我原来用了一个js，分别写了两遍，但是还是不行啊，求大神解释下。
...全文
请发表友善的回复…
发表回复
Go 旅城通票 2013-12-23
- 打赏
- 举报
你用我的测试，在对照你的结构（注意ID）
南林狼 2013-12-22
- 打赏
- 举报
下面的还没动啊
南林狼 2013-12-22
- 打赏
- 举报
不行啊，改了过后是这样的。
北京不不 2013-12-19
- 打赏
- 举报
Go 旅城通票 2013-12-18
- 打赏
- 举报
楼主要好好学下js啊，都写好给你了都不会扩展。。
做成类的形式，new出实例就行了
<ul id="gai-tab" class="news-nav">
<li class="first active">
<label>俊采深度</label><a href="{PE.Label id="取得节点链接路径" nodeId="37" /}" class="more" title="俊采深度"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="37" len="90" ts="5" /}
</ul>
</li>
<li>
<label>行业新闻</label><a href="{PE.Label id="取得节点链接路径" nodeId="38" /}" class="more" title="行业新闻"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="38" len="90" ts="5" /}
</ul>
</li>
<li>
<label>俊采公告</label><a href="{PE.Label id="取得节点链接路径" nodeId="39" /}" class="more" title="俊采公告"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="39" len="90" ts="5" /}
</ul>
</li>
<li>
<label>解决方案</label><a href="{PE.Label id="取得节点链接路径" nodeId="40" /}" class="more" title="解决方案"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="40" len="90" ts="5" /}
</ul>
</li>
<li>
<label>HR专区</label><a href="{PE.Label id="取得节点链接路径" nodeId="41" /}" class="more" title="HR专区"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="41" len="90" ts="5" /}
</ul>
</li>
<li>
<label>人才服务</label><a href="{PE.Label id="取得节点链接路径" nodeId="42" /}" class="more" title="人才服务"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="42" len="90" ts="5" /}
</ul>
</li>
</ul>
<ul id="tab2" class="news-nav">
<li class="first active">
<label>俊采深度</label><a href="{PE.Label id="A1" nodeId="37" /}" class="more" title="俊采深度"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="37" len="90" ts="5" /}
</ul>
</li>
<li>
<label>行业新闻</label><a href="{PE.Label id="A2" nodeId="38" /}" class="more" title="行业新闻"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="38" len="90" ts="5" /}
</ul>
</li>
<li>
<label>俊采公告</label><a href="{PE.Label id="A3" nodeId="39" /}" class="more" title="俊采公告"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="39" len="90" ts="5" /}
</ul>
</li>
<li>
<label>解决方案</label><a href="{PE.Label id="A4" nodeId="40" /}" class="more" title="解决方案"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="40" len="90" ts="5" /}
</ul>
</li>
<li>
<label>HR专区</label><a href="{PE.Label id="A5" nodeId="41" /}" class="more" title="HR专区"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="41" len="90" ts="5" /}
</ul>
</li>
<li>
<label>人才服务</label><a href="{PE.Label id="A6" nodeId="42" /}" class="more" title="人才服务"></a>
<ul class="cont1">
{PE.Label id="shouyexinwen" nodeids="42" len="90" ts="5" /}
</ul>
</li>
</ul>
<script>
function Tab(id) {
function contains(t, o) {
if (t == o) return true;
while (o = o.parentNode) if (o == t) return true;
return false;
}
var lis = [], ulTab = document.getElementById(id), uls = ulTab.getElementsByTagName('ul'), nowIndex = 0;
for (var i = 0; i < uls.length; i++) {
lis[i] = uls[i].parentNode;
uls[i].style.display = i == 0 ? 'block' : 'none';
lis[i].onmouseover = lis[i].onmouseout = (function (index) {
return function (e) {
e = e || window.event;
if (e.type == 'mouseover') {
clearInterval(timer);
chr(index);
}
else {
var o = e.toElement || e.relatedTarget;
if (contains(ulTab, o)) return false;
timer = setInterval(function () { chr() }, 3000);
}
}
})(i);
}
function chr(index) {
if (index == undefined) nowIndex++;
else nowIndex = index;
if (nowIndex >= uls.length) nowIndex = 0;
for (var i = 0; i < uls.length; i++) {
lis[i].className = i == nowIndex ? 'first active' : '';
uls[i].style.display = i == nowIndex ? 'block' : 'none';
}
}
lis[0].className = 'first active';
var timer = setInterval(function () { chr() }, 3000);
}
new Tab('gai-tab');
new Tab('tab2')
</script>
