Я использую вкладки jquery ui, и у меня есть страница с вкладками внутри вкладок, а содержимое внутренних вкладок загружается через Ajax (путем передачи URL-адреса в атрибуте href моего элемента). HTML выглядит так:
<div class="tabs">
<ul>
<li><a href="#tabs-1">Tab 1</a></li>
<li><a href="#tabs-2">Tab 2</a></li>
<li><a href="#tabs-4">Tab 3</a></li>
</ul>
<div id="tabs-1" class="tabs">
<p>Some content for parent tabs 1</p>
<!-- Inner tabs -->
<ul>
<li><a href="ajax/content1.html">Inner Tab 1</a></li>
</ul>
</div>
<div id="tabs-2" class="tabs">
<p>Some content for parent tabs 2</p>
<!-- Inner tabs -->
<ul>
<li><a href="ajax/content2.html">Inner Tab 2</a></li>
<li><a href="ajax/content3.html">Inner Tab 3</a></li>
</ul>
</div>
<div id="tabs-3" class="tabs">
<p>Some content for parent tabs 3</p>
<!-- Inner tabs -->
<ul>
<li><a href="ajax/content4.html">Inner Tab 4</a></li>
<li><a href="ajax/content5.html">Inner Tab 5</a></li>
<li><a href="ajax/content6.html">Inner Tab 6</a></li>
</ul>
</div>
</div>
Я хочу сделать 2 вещи:
1- Поскольку содержимое внутренних вкладок загружается через Ajax, контент пока не отображается для этих вкладок, когда пользователь впервые приходит на страницу. Поэтому пользователь должен на самом деле щелкнуть, чтобы показать содержимое внутренних вкладок, но я хочу, чтобы, когда пользователь впервые приходит на страницу в первый раз, я хочу, чтобы содержимое выбранных по умолчанию внутренних вкладок отображалось на пользователь (вместо некоторого пустого содержимого)
2- Я знаю, что я могу установить, какие вкладки выбраны при инициализации, используя selected
параметры вкладок, например:
$( ".selector" ).tabs({ selected: 0 });
Делая это, я всегда получаю первую выбранную вкладку (но это работает только при первой инициализации вкладок). Теперь я хочу, чтобы ВСЕГДА была выбрана первая внутренняя вкладка, когда пользователь нажимает на родительские вкладки. В случае слов, если пользователь нажимает на вкладку 1, я хочу, чтобы внутренняя вкладка Внутренняя вкладка 1 была выбрана, если пользователь нажимает на вкладку 2, я хочу, чтобы внутренняя вкладка Внутренняя вкладка 2 была выбрана, и если пользователь нажимает Вкладка 3, я хочу, чтобы внутренняя вкладка Внутренняя вкладка 4 была выбрана. Я также хочу, чтобы содержимое выбранной вкладки было ВСЕГДА видимым.
Надеюсь, я был достаточно ясен в своем объяснении. Пожалуйста, помогите мне с этим.
спасибо
Для вашего первого пункта, чтобы показать образец образца, используйте что-то вроде ниже. Для innertab1 вам не нужно перемещаться по URL-адресу, поскольку содержимое будет загружено через AJAX. Вместо этого для href укажите "div id", в котором содержимое вкладок будет храниться, как показано ниже:
<ul>
<li><a href="#innertab1">Inner Tab 1</a></li>
</ul>
<div id="innertab1">
Sample content of inner tab 1. This content will be loaded via ajax
</div>
Кроме того, я не уверен, что понимаю ваш второй момент. Когда я нажимаю на tab1, я вижу внутренний tab1, и когда я нажимаю на tab2, я вижу внутреннюю tab2. В чем проблема?