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