这是我的小提琴http://jsfiddle.net/LTpL6/
HTML:
<ul class="tabs_down_link">
<li ><a style=" padding: 7px 14px;font-size: 16px; color: #000; border- bottom:1px solid #FFFFFF;" href="#view_down7">Subject Area-Based Citations</a></li>
<li ><a href="#view_down8">Sub-Area Based Citations</a></li>
</ul>
<div class="tabcontents_down_link">
<div id="view_down7" style="line-height:180%; font-size: 14px;font-weight: bold; color: #808080; ">
<input type="checkbox" /> (SciCI)<br/>
<input type="checkbox" /> (SS&HCI)<br/>
<input type="checkbox" /> (M&HSCI) <br/>
<input type="checkbox" /> (LSciCI)<br/>
</div>
<div id="view_down8" style="font-weight: bold;line-height:180%; font-size: 14px; color: #808080;">
<input type="checkbox" /> History Citation Index<br/>
<input type="checkbox"/> Religion Citation Index<br/>
<input type="checkbox" /> Biotechnology Citation Index<br/>
<input type="checkbox" /> Food Science Citation Index<br/>
<input type="checkbox" /> Chemistry Citation Index<br/>
<input type="checkbox" /> Mathematics Citation Index<br/>
<input type="checkbox" /> Neuroscience Citation Index<br/>
</div>
</div>
Javascript:
$(document).ready(function () {
$('div[id^=view_down]').hide();
$('#view_down7').show();
$('.tabs_down_link a').click(function () {
var tab_id = $(this).attr('href');
var now = $(this).attr('.tabs_down_link a');
$('div[id^=view_down]').hide();
$(tab_id).show();
});
});
在这里一切正常。
现在有两个选项卡1.基于主题的引用2.基于子区域的引用
有一个公共div,用户单击任何特定的选项卡都可以单击该内容,该内容将显示在该公共div中,现在它可以正确显示,但是我需要根据单击的选项卡更改选项卡名称。
因此,现在默认为基于主题领域的引文选项卡,因此,当用户尝试单击基于子区域的引文时,选项卡名称“基于子区域的引文”应自动进入第一个默认选项卡。
怎么做,请帮忙。
只需将此代码添加到$('。tabs_down_link a')。click()函数中,它便会相应地更改选项卡名称。
var newName = $(this).text();
$(this).text($('#selected-tab').text());
$('#selected-tab').text(newName);
此代码将互换第一个选定标签和选定标签的名称。别忘了将ID“ selected-tab”赋予第一个标签。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句