javascript - jqueryで選択したタブごとにタブ名を交換する方法

Question

ここに私のフィドルがあります http://jsfiddle.net/LTpL6/

 Code:
    <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/>
                                                                    <input   type="submit" class="search-butt" style="margin-left: 727px; float: left;"  name="submit_docu" value="Search" /><br/>
                                                                </div>
                                                            </div>

   Jquery
   $(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(); 
   });
  });

ここでは、すべて正常に動作します。

現在、2 つのタブがあります。 1.Subject Area-Based Citations 2.Sub-Area Based Citations

ユーザーが特定のタブをクリックすると、コンテンツがその共通 div に表示されるようになりましたが、正しく表示されるようになりましたが、クリックしたタブに応じてタブ名を変更する必要があります。

そのため、デフォルトは Subject Area-Based Citations タブであるため、ユーザーが Sub-Area Based Citations をクリックしようとすると、タブ名「Sub-Area Based Citations」が自動的に最初のデフォルト タブに表示されます。

その方法を教えてください。