轉到＃超鏈接的特定選項卡（accordin）

我正在使用下面的代碼切換選項卡。但問題是，如果我把＃tab中的tabe標識符，它將不會轉到特定的選項卡。轉到＃超鏈接的特定選項卡（accordin）

<a href="index.php#tab2">Tab 2</a> 
<a href="index.php#tab3">Tab 3</a>

下面是代碼

jQuery(document).ready(function() { 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
     var currentAttrValue = jQuery(this).attr('href'); 

     // Show/Hide Tabs 
     jQuery('.tabs ' + currentAttrValue).show().siblings().hide(); 

     // Change/remove current tab to active 
     jQuery(this).parent('li').addClass('active').siblings().removeClass('active'); 

     e.preventDefault(); 
    }); 
});

HTML代碼

 <ul class="tab-links"> 
      <li class="active"><a style="" href="#tab1">Account</a></li> 
      <li><a href="#tab2">Jobs Posted</a></li> 
      <li><a href="#tab3">Messages</a></li> 
      <li><a href="#tab4">Post A Job</a></li> 
     </ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab active" style="padding-bottom:30px;"> 
    </div> 
    <div id="tab1" class="tab" style="padding-bottom:30px;"> 
    </div> 
    <div id="tab1" class="tab" style="padding-bottom:30px;"> 
    </div> 
</div>

來源

2015-04-29 Gijo Varghese

請您試圖展現的元素添加HTML。最好創建一個演示問題的JSFiddle。 – ekuusela

你可以實現jQuery UI並使用tabs（）方法，如下所示http://stackoverflow.com/questions/578348/switch-to-selected-tab-by-name-in-jquery-ui-tabs希望這有助於 –

您必須確定您使用id顯示的元素 - 瀏覽器知道如何將url中的哈希與要滾動的元素進行匹配。你還需要一些jquery來讀取URL並顯示合適的元素，並選擇適當的選項卡 –

你可以嘗試修改該行：var currentAttrValue = jQuery(this).attr('href').split("#")[1];

與你得到的鏈接的href的"tab2"部分屬性

jQuery(document).ready(function() { 
 
    var changeTab = function(id) { 
 
     // Show/Hide Tabs 
 
     jQuery('.tab-content #' + id).show().siblings().hide(); 
 

 
     // Change/remove current tab to active 
 
     jQuery('.tab-content #' + id + ':visible').addClass("active").siblings().removeClass('active'); 
 
    }; 
 

 
    jQuery('.tabs .tab-links a').on('click', function(e) { 
 
     e.preventDefault(); 
 
     // Here you will get the tab id, comming from the clicked hyperlink 
 
     var currentAttrValue = jQuery(this).attr('href').split("#")[1]; 
 
     // Change/remove current tab to active 
 
     jQuery(this).parents("li").addClass("active").siblings().removeClass('active'); 
 
     changeTab(currentAttrValue); 
 
    }); 
 
    
 
    var tab = document.location.href.split("#"); 
 
    if(tab.length > 0) { 
 
     var id = tab[1]; 
 
     jQuery('.tabs .tab-links a[href="#' + id + '"]').click(); 
 
     window.addEventListener("load",function() { 
 
     jQuery(window).scrollTop(0); 
 
     },true); 
 
    } 
 
});

.active { 
 
    color:red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tab-content"> 
 
<div id="tab1" class="tab active" style="padding-bottom:30px;">tab 1 content 
 
</div> 
 
<div id="tab2" class="tab" style="padding-bottom:30px;">tab 2 content 
 
</div> 
 
<div id="tab3" class="tab" style="padding-bottom:30px;">tab 3 content 
 
</div> 
 
</div> 
 
<div class="tabs"> 
 
    
 
    <div class="tab-links"> 
 
    <a href="index.php#tab1">Tab 1</a> 
 
    <a href="index.php#tab2">Tab 2</a> 
 
    <a href="index.php#tab3">Tab 3</a> 
 
    </div> 
 
    
 
</div>

來源

2015-04-29 17:31:30

其不工作 –

哈哈爲什麼downvotes o_0？檢查片段 –

不，它不工作 –

轉到＃超鏈接的特定選項卡（accordin）

回答

相關問題