如果您來自特定網站或鏈接，如何更改頁面元素的CSS類？

Question

我在其中一個頁面中實現了「Tab」功能。以下是代碼：

$(document).ready(function() { 
 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 
    $('ul.tabs li').removeClass('current'); 
 
    $('.tab-content').removeClass('current'); 
 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 
})

.tab.current { 
 
    color: red; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
} 
 

 
.tab-content.current { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li class="tab current" data-tab="tab-1">Overview</li> 
 
    <li class="tab" data-tab="tab-2">Get started</li> 
 
</ul> 
 

 
<article id="tab-1" class="tab-content current">TAB 1</article> 
 
<article id="tab-2" class="tab-content">TAB 2</article>

它可以完美的，但只有在這個頁面。我想要實現的是從另一個頁面（index.html）到這個（features.html）的鏈接，並選擇了特定的選項卡。

是否有任何簡單的方法來更新我的功能來實現這種行爲？

Here is a codepen link with the code.

Answer 1

實施例裏Get started是feature.html和列表Overview是index.html。你可以做的是把類current放在列表數據標籤和文章ID tab-2在feature.html反正它會刪除類，當你點擊列表overview。

$(document).ready(function() { 
 
    $('ul.tabs li').click(function() { 
 
    var tab_id = $(this).attr('data-tab'); 
 
    $('ul.tabs li').removeClass('current'); 
 
    $('.tab-content').removeClass('current'); 
 
    $(this).addClass('current'); 
 
    $("#" + tab_id).addClass('current'); 
 
    }) 
 
});

.tab.current { 
 
    color: red; 
 
} 
 

 
.tab-content { 
 
    display: none; 
 
} 
 

 
.tab-content.current { 
 
    display: block; 
 
} 
 

 
li { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="tabs"> 
 
    <li class="tab" data-tab="tab-1">Overview</li> 
 
    <li class="tab current" data-tab="tab-2">Get started</li> 
 
</ul> 
 

 
<article id="tab-1" class="tab-content">TAB 1</article> 
 
<article id="tab-2" class="tab-content current">TAB 2</article>