Программно изменить выбранные вкладки пользовательского интерфейса jQuery?

Question

У меня есть страница, где я просто использую стилизованную часть вкладок. Нажав на вкладку, вы перейдете на новую страницу с активной вкладкой, чтобы почти подражать тому, что они должны делать, но не иметь 4 больших страницы внутри одного. Для каждой страницы я меняю активную вкладку на

$(".tabs").tabs({ active:2 }); 

и так далее. Это прекрасно работает. Теперь для диалога. На этой странице есть диалог, который также инициирует вкладки. Поскольку есть информация, которая вложена во многие div, функциональность по умолчанию для «вкладок» не будет работать. Насколько я понимаю, когда вы нажимаете вкладку, она ищет следующий div. 3 вкладки = всего 3 div. Поэтому в этом случае я снова использую вкладки для стилизации и просто показываю/скрываю информацию, необходимую для каждой отдельной вкладки (всего 3 вкладки) и открепляя клик.

$('.tabsDialog > ul > li > a').unbind('click'); 

Таким образом, естественно, моя мысль с функцией мыши, чтобы скрыть предыдущий DIV и показать новый один будет активировать эту новую вкладку. Так что-то вроде этого

  $('a.globalSet').on('click',function(){ 
       $('div.timeSet').hide(); 
       $('div.globalSet').fadeIn(); 
       $('div.comManager').hide(); 
       $("li.timeSet").tabs({ active:1 }); 
      }); 

и это не активирует мою новую вкладку. Я пробовал addClass .ui-tabs-active и до сих пор не повезло. Есть идеи? Заранее спасибо. jsfiddle: http://jsfiddle.net/tRKSv/2/

Answer 1

Tabs виджет не работает точно так, как вы говорите, я не смотрю на «следующий» div, он ищет div с тем же id вы положили в href атрибут a тега ваш html (или если это не привязка, страница для загрузки содержимого).

Итак, чтобы ваш код работал, просто поместите надлежащие href атрибуты в свои теги a. Вот только один пример для диалога, но вы должны отразить этот код для обоего вкладок:

<div id="dialog" title="Basic dialog"> 
    <div id="dialogTabs"> 
    <ul> 
     <li><a href="#info1">dialog info 1</a></li><!-- 'a' tags with proper href --> 
     <li><a href="#info2">dialog info 2</a></li> 
     <li><a href="#comManager">dialog info 3</a></li> 
     <li><a href="someOtherPage.html">dialog info 3</a></li><!-- ajax loaded content --> 
    </ul> 
    <div id='info1' class='info1'> <!-- div with corresponding 'id' attribute --> 
     <!- More content here -> 
    </div> 
    <div id='info2' class='info1'> 
     <!- More content here -> 
    </div> 
    <div id='comManager' class='comManager'> 
     <!- More content here -> 
    </div> 
    </div> 
</div> 

Здесь скрипка: http://jsfiddle.net/rf90210/tRKSv/3/