使用來自同一網站上其他頁面的超鏈接定位特定的選項卡

Question

我有一個頁面（documents.php），其中包含四個選項卡，第一個選項卡設置為默認選項卡，當其中一個瀏覽到documents.php時打開

我需要能夠直接通過index.php上的超鏈接以及出現在網站所有頁面上的JavaScript菜單來定位選項卡2、3和4。

例：

documents.php上的選項卡3包含“存檔文檔”。

在Index.php上，我想放置一個名為“單擊此處轉到存檔的文檔”的鏈接，當有人單擊它時，必須將其帶到documents.php，但是自動轉到選項卡3，即“存檔的文檔”，而不是轉到默認的第一個標簽。

這是我用來創建選項卡的編碼，並且只想最多對其進行修改（而不是通過使用jQuery或其他技術重新發明輪子，而是在此頁面和其他頁面上重寫選項卡）：

HTML：

<ul>
    <li class="current"><a href="#tab1">General Documents</a></li>
    <li><a href="#tab2">Circulars</a></li>
    <li><a href="#tab3">Newsletters</a></li>
    <li><a href="#tab4">Archived Documents</a></li>
</ul>

Javascript：

<script>
$(document).ready(function(){
 $(".tabs li").click(function() {
  $(this).parent().parent().find(".tab-content").hide();
  var selected_tab = $(this).find("a").attr("href");
  $(selected_tab).fadeIn();
  $(this).parent().find("li").removeClass('current');
  $(this).addClass("current");
   return false;
    });
});</script>

然后在外部樣式表中有一些CSS，用於格式化Tab，其邊框，背景等。

CSS格式：

.tabs ul{
    list-style:none;
    display:block;
    margin:0px;
    padding:0px;
    z-index:99;
    position:relative;
}
.tabs li {
    float:left;
    display:block;
    border-top:#E5E5E5 1px solid;
    border-left:#E5E5E5 1px solid;
    border-right:#E5E5E5 1px solid;
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    position:relative;
    z-index:999;    
    color: #444444;
    padding: 4px 8px 4px 8px;
    margin: 0px 6px 0px 0px;
    background: #e7e7e7 url(/assets/images/common/bg.png) repeat-x;
}

.tabs li:hover {

/*If you want hover effects on tabs put your css here*/

}
.tabs li a {
    display:block;
    color:#323234;
    outline:none;
}

.tabs li.current {
    border-bottom:#DD6E27 2px solid;
    outline:none;
}

.tab-content {
    display:none;
    clear:both;
    min-height: 120px;
    border-top-left-radius:0px;
    border-top-right-radius:4px;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;
    color:#444444;
      background:#fefefe url(/assets/images/common/bg.png) repeat-x;
    border: 1px solid #E5E5E5;
    overflow:hidden;
    padding:15px;
}

.tab-content:first-child {
    display: block;
}

Answer 1

傳遞＃值網址，例如http：//example.com#tabs3 。然后在文檔中使用類似的用法。

$(document).ready(function(){
  var hash = window.location.hash;
  $('#'+ hash).addClass("current");

 $(".tabs li").click(function() {
  $(this).parent().parent().find(".tab-content").hide();
  var selected_tab = $(this).find("a").attr("href");
  $(selected_tab).fadeIn();
  $(this).parent().find("li").removeClass('current');
  $(this).addClass("current");
  return false;
  });

});