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; 
});