всегда устанавливать первые вкладки на выбранные и всегда показывать содержимое выбранных вкладок jquery ui tabs

-3

Я использую вкладки 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 была выбрана. Я также хочу, чтобы содержимое выбранной вкладки было ВСЕГДА видимым.

Надеюсь, я был достаточно ясен в своем объяснении. Пожалуйста, помогите мне с этим.

спасибо

Теги:
jquery-ui-tabs

1 ответ

0

Для вашего первого пункта, чтобы показать образец образца, используйте что-то вроде ниже. Для 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. В чем проблема?

  • 0
    Если я сделаю это, мой контент НЕ будет загружен с помощью Ajax (я должен был бы сделать это отдельно, используя jQuery .load () или что-то в этом роде), я хочу сделать это в соответствии с рекомендациями вкладок пользовательского интерфейса jQuery в разделе Ajax ( jqueryui. com / demos / tabs / # ajax )
  • 0
    Вопрос для второго пункта, скажем, пользователь нажимает на вкладку 3 и нажимает на внутреннюю вкладку внутренней вкладки 5. Теперь предположим, что пользователь нажимает на вкладку 2, если пользователь возвращается к вкладке 3, внутренняя вкладка внутренней вкладки 5 все равно будет выбран. Я хочу, чтобы первая вкладка всегда была предварительно выбранной, когда пользователь нажимает на родительскую вкладку
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню