如何在jquery中获取选定的选项卡名称

Question

这是我的小提琴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" />&nbsp;(SciCI)<br/>
                                                                <input   type="checkbox" />&nbsp;(SS&HCI)<br/>
                                                                <input  type="checkbox" />&nbsp; (M&HSCI) <br/>
                                                                <input  type="checkbox" />&nbsp;(LSciCI)<br/>

 </div>

  <div id="view_down8" style="font-weight: bold;line-height:180%; font-size: 14px; color: #808080;">
                                                                <input    type="checkbox" />&nbsp;History Citation Index<br/>
                                                                <input  type="checkbox"/>&nbsp;Religion Citation Index<br/>
                                                                <input   type="checkbox" />&nbsp;Biotechnology Citation Index<br/>
                                                                <input  type="checkbox" />&nbsp;Food Science Citation Index<br/>
                                                                <input  type="checkbox" />&nbsp;Chemistry Citation Index<br/>
                                                                <input  type="checkbox" />&nbsp;Mathematics Citation Index<br/>
                                                                <input  type="checkbox" />&nbsp;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.Subject Area-Based Citations 2.Sub-Area Based Citations

有一个通用 div，用户在其中单击任何特定选项卡，内容将显示在该通用 div 中，现在它显示正确，但我需要根据单击的选项卡更改选项卡名称。

所以现在默认是基于主题区域的引文选项卡，因此当用户尝试单击基于子区域的引文时，选项卡名称“基于子区域的引文”应自动出现在第一个默认选项卡中。

如何做到这一点，请帮忙。

Answer 1

只需将此代码添加到您的 $('.tabs_down_link a').click() 函数中，它就会相应地更改选项卡名称。

var newName =  $(this).text();
    $(this).text($('#selected-tab').text());
   $('#selected-tab').text(newName);

此代码将互换第一个选定选项卡和选定选项卡的名称。不要忘记将 id "selected-tab" 赋予第一个选项卡。