2010-04-27 3 views
1

Я имел вкладки с предварительно загруженным содержанием, как это:Отображение выбранных вкладок по-разному с помощью вкладок Ajax JQuery

$(function() { 

    $('div.tabs ul.tabNavigation a').click(function() { 
     $('div.tabs ul.tabNavigation a').removeClass('selected'); 
     $(this).addClass('selected'); 
     return false; 
    }).filter(':first').click(); 
}); 

Этот добавленный класс = «выбранный», чтобы ссылки и CSS сделал выбранная вкладка отличаться

<div class="tabs"> 
    <ul class="tabNavigation"> 
     <li><a href="#content1">c1</a></li> 
     <li><a href="#content2">c2</a></li> 
     <li><a href="#content3">c3</a></li> 
    </ul> 
    <div id="content1"> 
     content 1 
    </div> 
    <div id="content2"> 
     content 2 
    </div> 
    <div id="content3"> 
     content 3 
    </div> 

Теперь я пытаюсь заставить ajax работать. Хорошо Это работает, но у меня есть troube, получивший Class = "selected" в моих ссылках.

Функция JS с помощью AJAX выглядит следующим образом:

$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html("there was a problem"); 
      } 
     } 
    }); 
}); 

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

+0

Можете ли вы обновить свой вопрос кодом, который вы используете для версии ajax? Все, что у вас есть, это статическая версия html. Благодарю. – jessegavin

+0

С ajax единственным изменением в html является то, что ссылки имеют href = "somepage.html". И код javascript, который я дал. Загрузка контента работает нормально, но у меня возникают проблемы с тем, что пользовательский стиль может выбрать вкладку. – ivar

ответ

0
$(function() { 
    $("#tabs").tabs({ 
     ajaxOptions: { 
      error: function(xhr, status, index, anchor) { 
       $(anchor.hash).html("Laadimisel ilmnes viga"); 
      } 
     } 
    }); 
    $('#tabs A').click(function(){ 
     if($(this).hasClass('selected')){ return false; } 

     $('#tabs A.selected').removeClass('selected'); 
     $(this).addClass('selected');  
     return false; 
    }); 
}); 

Это сработало.

Смежные вопросы