jQuery Tabs. Ссылки внутри вкладок на вкладку - PullRequest
Новая
       33

jQuery Tabs. Ссылки внутри вкладок на вкладку

0 голосов
/ 21 января 2010

Обновление

Привет, ребята!

Связь работает, но теперь я столкнулся с другой проблемой. Когда я щелкаю ссылку на вкладке и снова нажимаю на «Меню», вкладки выглядят как дерьмо См. Рабочий пример ссылки и кода ниже.

1009 * 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>

Ответы [ 2 ]

2 голосов
/ 21 января 2010

Я думаю, что ваша проблема в пропущенных скобках и скобках в вашем 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;
    });
});
0 голосов
/ 21 января 2010

нет, ваша проблема в том, что здесь: 

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

вы выбрали элементы с именем класса 'tolast', которое онкликом указывает на третью вкладку.

здесь вы можете видеть, что у вас есть два элемента с классом '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;
});
...