如何使用JQuery使特定網址生效選項卡

Question

在我的主頁上有一個按鈕。該按鈕導致帶有選項卡的另一個頁面。只要點擊主頁上的特定按鈕，如何激活一個選項卡並顯示其內容？這是否可能發生，或者必須發生事件？

if(location.hash) { 
 
     $('#tabbedContent').each(function(){ 
 
      $(this).find("#champion" + location.hash.substr(1)).fadeIn(); 
 
     }); 
 
    } else { 
 
     $('#tabbedContent').each(function(){ 
 
      $(this).find(':first-child').fadeIn(); 
 
     }); 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box"> 
 
\t <div class="btnList"> 
 
\t \t <ul class="btnSet"> 
 
\t \t \t <li> 
 
\t \t \t \t <a class="tab linkSection" href="#annual"><span>Nominate a Champion</span></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a class="tab linkSection" href="#pathology"><span>Become a Champion</span></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a class="tab double linkSection" href="#workshop"><span>Promote the Program</span></a> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t \t <a class="tab double linkSection" href="#champion"><span>Contact a Champion</span></a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t </div><!-- meetings tabbed section --> 
 
\t <div class="tabbedContent onPage active" id="annual"> 
 
\t \t <div class="tabbedContent infoPage"> 
 
\t \t \t <div class="greyBox column col-50"> 
 
\t \t \t \t <h2>text</h2> 
 
\t \t \t </div> 
 
\t \t \t <div class="column col-50"> 
 
\t \t \t \t <div class="borderBox"> 
 
\t \t \t \t \t <h2>text</h2> 
 
\t \t \t \t </div><br> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 1

這個問題完全可以利用CSS來解決。

樣式的所有標籤不被默認爲可見，然後使用CSS :target僞類，你認爲合適的風格的活動標籤。

/* All tabs use this class by default */ 
 
.tab { opacity:0; position:absolute;} 
 

 
/* The active tab will use this rule. It's important that this selector 
 
    is a more specific selector than the default selector, which it is here. */ 
 
.tab:target { opacity:1; transition:1.5s;}

<nav> 
 
    <a href="#tab1">Tab 1</a> 
 
    <a href="#tab2">Tab 2</a> 
 
    <a href="#tab3">Tab 3</a> 
 
    <a href="#tab4">Tab 4</a> 
 
</nav> 
 
<div id="tab1" class="tab"> 
 
    <h1>Welcome to Tab 1</h1> 
 
</div> 
 
<div id="tab2" class="tab"> 
 
    <h1>Welcome to Tab 2</h1> 
 
</div> 
 
<div id="tab3" class="tab"> 
 
    <h1>Welcome to Tab 3</h1> 
 
</div> 
 
<div id="tab4" class="tab"> 
 
    <h1>Welcome to Tab 4</h1> 
 
</div>