jQuery選項卡。在標籤內鏈接到標籤

Question

更新

嗨，大家好！

得到了鏈接工作，但現在我正面臨着另一個問題。當我點擊標籤內的鏈接並再次點擊「菜單」選項卡時，標籤看起來就像狗屎。請參閱下面的工作示例鏈接和代碼。

RGDS

muttmagandi

http://www.vallatravet.se/thetabs/

$(document).ready(function(){ 


$(".fadeOut").fadeTo(0, 0.5); 

$("#forklara").bind("click", function(e) 
{ 
    $("div:hidden:#one").fadeIn("slow"); 

}); 

$(".Rehabilitering").bind("click", function() { 

    var $tabs= $("#container-1").tabs(); 
    $tabs.tabs('select', 3); // switch to third tab 
    $("div:hidden:#one").fadeIn("slow"); 

    return false; 
}); 

$(".SO").bind("click", function() { 

    var $tabs= $("#container-1").tabs(); 
    $tabs.tabs('select', 3); // switch to third tab 
    $("div:hidden:#two").fadeIn("slow"); 

    return false; 
}); 
}); 
</script> 
     <div id="container-1"> 
     <ul> 
      <li><a href="#fragment-1"><span>one</span></a></li> 
      <li><a href="#fragment-2"><span>two</span></a></li> 
      <li><a href="#fragment-3"><span>three</span></a></li> 
      <li><a href="#fragment-4"><span id="forklara">four</span></a></li> 
     </ul> 

     <div id="fragment-1"> 
      <div class="cat-1"> 
       <li><a href="#Rehabilitering" class="Rehabilitering">Rehabilitering</a></li> 
       <li><a href="#SO" class="SO">Second opinion</a></li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li class="fadeOut">Sjukgymnastik, naprapat & kiropraktor</li> 
       <li class="fadeOut">Psykologi</li> 
       <li class="fadeOut">Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-2"> 
      <div class="cat-1"> 
       <li><a href="#tolast" class="tolast">Rehabilitering</a></li> 
       <li>Second opinion</li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li>Sjukgymnastik, naprapat & kiropraktor</li> 
       <li class="fadeOut">Psykologi</li> 
       <li class="fadeOut">Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-3"> 
      <div class="cat-1"> 
       <li><a href="#tolast" class="tolast">Rehabilitering</a></li> 
       <li>Second opinion</li> 
       <li>Krisstöd</li> 
       <li>Specialistläkarbesök</li> 
       <li>Cancerbehandling</li> 
      </div> 
      <div class="cat-2"> 
       <li>Dagkirurgi</li> 
       <li>Inläggning på sjukhus</li> 
       <li>Sjukgymnastik, naprapat & kiropraktor</li> 
       <li>Psykologi</li> 
       <li>Personstöd</li> 
      </div> 
     </div> 

     <div id="fragment-4"> 
      <div id="one" style="padding:25px 0px 0px 20px; display:none;"><b>Rehabilitering</b><br /> 
      The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. 
      </div> 

      <div id="two" style="padding:25px 0px 0px 20px; display:none;"><b>Second opinion</b><br /> 
      Ytterligare bedömning av annan läkare vid allvarlig sjukdom eller svårt medicinskt ställningstagande. 
      </div> 

     </div> 

    </div> 

Answer 1

我認爲你的問題只是在你的JavaScript缺少大括號和括號，因爲相同的代碼工作正常添加了這兩件事情 - http://jsbin.com/eriba/2。

$(document).ready(function(){ 
    var $tabs= $("#container-1").tabs(); 
    $('.tolast').click(function() { 
      $tabs.tabs('select', 2); 
     return false; 
    }); 

應該是...

$(document).ready(function(){ 
    var $tabs= $("#container-1").tabs(); 
    $('.tolast').click(function() { 
      $tabs.tabs('select', 2); 
     return false; 
    }); 
}); 

Answer 2

沒有，你的問題是，在這裏 ：

var $tabs= $("#container-1").tabs(); 
$('.tolast').click(function() { 
     $tabs.tabs('select', 2); 
    return false; 
}); 

您選擇與類名的元素 'tolast' 其中的onclick點到第三個標籤。

在這裏你可以看到你有兩個具有類設置爲「tolast」

<div class="cat-1"> 
    <li><a href="#fragment-4" class="tolast">Link to four</a></li> 
</div> 
<div class="cat-2">     
    <li><a href="#fragment-4" class="tolast">Link to three</a></li> 
</div> 

我敢肯定，當您單擊的該元素的錨第三個選項卡會打開（我可以看它是錯的）。

我建議是這樣的：

<div class="cat-1"> 
    <li><a href="#fragment-4" class="to-forth">Link to four</a></li> 
</div> 
<div class="cat-2">     
    <li><a href="#fragment-4" class="to-third">Link to three</a></li> 
</div> 

則：

var $tabs= $("#container-1").tabs(); 
$('.to-forth').click(function() { 
    $tabs.tabs('select', 3); // go to forth tab 
    return false; 
}); 
$('.to-third').click(function() { 
    $tabs.tabs('select', 2); // go to third tab 
    return false; 
});