鏈接到div在一個單獨的選項卡

Question

我想鏈接到一個單獨的選項卡中的div。目前側面導航鏈接是這樣的：

var loc = window.location.hash; 
if (loc == "#bargain") { 
    jQuery('.tab-2').click(); 
    App.SetBaseLine(); 
    jQuery('#bargain').addClass('activeListColor'); 
}; 

     <li><a href="default.aspx#bargain">Bargain Packages</a></li> 

    <!-- start of tabHolder --> 
    <div id="tabHolder"> 
     <ul class="tabs_new buttons"> 
      <li class="liOuter" id="tab1"><a href="#" class="current tab-1">Buyers' Guide</a></li> 
      <li class="liInner" id="tab2"><a href="#" class="tab-2">Pricing Guide</a></li> 
     </ul> 

不幸的是，這並不帶我在第二個標籤下。我正在嘗試讓用戶點擊鏈接，並打開該標籤並將其錨定到div位置。

我很樂意提供建議。

Answer 1

您可以使用下面的jQuery實現了「標籤」般的效果

​$('a').click(function() { 
    $('div').hide(); 
    var destination = '#' + $(this).attr('data-tab'); 
    $(destination).toggle(); 
});​ 

看到這個live example

這裏是一個updated example與包裹在一個無序列表

另外的div，您可以使用「當前」類並使用以下代碼切換點擊：

$('a').click(function() { 
    $('.tabs div').removeClass('current'); 
    var destination = '#' + $(this).attr('data-tab'); 
    $(destination).toggleClass('current'); 
});​ 

這裏的另一個live example

Answer 2

你可以這樣說：

<ul class="tab"> 
    <li><a href="#tab1">One</a></li> 
    <li><a href="#tab2">Two</a></li> 
    <li><a href="#tab3">Three</a></li> 
</ul> 
<div class="tabs"> 
    <div id="tab1">Content 1</div> 
    <div id="tab2">Something here</div> 
    <div id="tab3">Omg! Three</div> 
</div> 

而且腳本爲：

$(document).ready(function(){ 
    $(".tab > li > a").click(function(){ 
     var tab = $(this).attr('href'); 
     $(".tab > li > a").removeAttr("style"); 
     $(this).css("background-color", "#ccc"); 
     $('.tabs > div:visible').hide(function(){ 
      $(tab).show(); 
     }); 
     return false; 
    }); 
    $('.tabs > div').hide(); 
    $('.tabs > div:first-child').show(); 
}); 

CSS：

body {overflow: hidden;} 
ul li {display: inline-block; *display: inline; *zoom: 1;} 
a {text-decoration: none; color: #f60; border-radius: 5px; padding: 5px; display: inline-block; *display: inline; *zoom: 1;} 
div {padding: 5px;} 

Fiddle！希望這是使用選項卡的最佳方式。 :)