如何使用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>