JQueryで特定のURLでタブをアクティブにする方法

Question

私のホームページにはボタンがあります。そのボタンは、タブ付きの別のページにつながります。 1つのタブをアクティブにして、ホームページの特定のボタンをクリックするたびにそのコンテンツを表示するにはどうすればよいですか？これも可能ですか、これが起こるためにイベントが行われなければなりませんか？

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>