Вкладки пользовательского интерфейса Jquery - выбор вкладки также переключает содержимое DIV на другую часть страницы

Question

Используя вкладки пользовательского интерфейса Jquery, я пытаюсь показать / скрыть различные элементы div, когда выбрана определенная вкладка. Элементы div будут на боковой панели, а действие вкладки - в главном элементе содержимого страницы.

Вот мой код:

            <div id="tabs">
            <ul>
            <li><a href="#tabs-1">tab 1</a></li>
            <li><a href="#tabs-2">tab 2</a></li>
            </ul>

            <div id="tabs-1">
            Tab 1 Content
            </div>

            <div id="tabs-2">
            Tab 2 Content
            </div>

            </div>


            <div id="sidebar">

            <div id="tabs1show">This is "#sidebar tabs1show ... 1</div>
            <div id="tabs2show">This is "#sidebar tabs2show"... 2</div>
            </div>

Когда выбрано #tabs-1, я бы хотел, чтобы содержимое #tabs1 показывалось на боковой панели. При выборе #tabs-2 #tabs1show div скрывается, а содержимое #tabs2show отображается на боковой панели. Я знаю, что я должен поместить какую-то комбинацию show/hide (возможно) в " $tabs = $('#tabs'). Tabs(); ", чтобы связать действие, но я не знаю точного способа сделать это. Я относительно новичок в jquery, поэтому, пожалуйста, любая помощь будет принята с благодарностью.

Спасибо.

Answer 1

Вы можете подключиться к событию select, когда кто-то выбирает вкладку:

$('#tabs').tabs({
   select: function(event, ui) {
       $('.secret').hide().eq(ui.index).show(); 
   }
});

'secret' - это класс, который я добавил в ваш html, делайте все, что хотите, чтобы настроить таргетинг на эти боковые панели.

jsFiddle

Answer 2

Вы можете сделать это следующим образом http://jsfiddle.net/gurkavcu/ZcHvV/.

Возможно, был лучший способ определить, какая вкладка выбрана.

Другие альтернативы:

ui.tab.panel.id == "tabs-1" && ui.tab.panel.id == "tabs-2"

ui.index == 0 && ui.index == 1