JQuery вкладки внутри вкладок не отображаются правильно - PullRequest
Новая
       24

JQuery вкладки внутри вкладок не отображаются правильно

2 голосов
/ 29 февраля 2012

У меня есть пользовательский код JavaScript для вкладок, который работает нормально, но я пытаюсь поместить дочерние вкладки внутрь, как показано здесь: 

<div id="tabs" style="position:relative; ">
            <ul id="nav">
              <li><a href="#prizes">Prizes</a></li>
              <li><a href="#basket">Your sack</a></li>
              <li><a href="#order-history">Order History</a></li>
            </ul>

            <div id="tab-prizes" class="tab"> 
              <?php include('prizes.php');?>
            </div>

А затем в файле prizes.php: 

<div id="tabsprizes" style="position:relative; ">
            <ul id="nav1">
              <li><a href="#branded">Weber Branded</a></li>
              <li><a href="#for-him">For Him</a></li>
            </ul>

            <div id="tab-branded" class="tab">

                <?php echo "fgdsd"; ?>

            </div>

Мне бы хотелось, чтобы они пошли, например, на вкладку призов, и там есть другой набор вкладок, который они могут использовать только на этой странице. При нажатии на дочерние вкладки в настоящий момент весь контент исчезает. Вот мой JS: 

$("#parenttabs #nav a").click(function() {   //Parent Tabs Click Function
    var hash = this.getAttribute("href");
    if (hash.substring(0, 1) === "#") {
        hash = hash.substring(1);
    }

    location.hash = hash;
    showTab(hash);

    return false;
});

function showTab(hash) {
    $("div.tab").hide();
    $("#tab-" + hash).fadeIn();
}

Извините за весь код, не уверен, что именно показать: /

Спасибо

Ответы [ 2 ]

3 голосов
/ 20 марта 2013

Если вы используете jQuery UI, не должно быть проблем с вложением вкладок. Просто убедитесь, что элементы используют уникальные идентификаторы 

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>Nothing to show..</p>
    </div>
    <div id="tabs-2">
        <p>Tabs in tab!</p>
        <div id="more-tabs">
            <ul>
                <li><a href="#nested-tabs-1">Child Tab 1</a></li>
                <li><a href="#nested-tabs-2">Child Tab 2</a></li>
            </ul>
            <div id="nested-tabs-1"><p>Content here...</p></div>
            <div id="nested-tabs-2"><p>More content here...</p></div>
        </div>
    </div>
</div>

Пример jsFiddle

3 голосов
/ 29 февраля 2012

Взглянув на документацию по JQuery UI , я не вижу ссылок на функциональность tab-in-tab.Предполагая, конечно, что вы используете JQuery UI.

Вот пример разметки вложенных вкладок JQuery UI.Изучите его, и вы сможете узнать, почему ваш код не работает должным образом.

Я бы посоветовал вам взглянуть на JQuery tools , так как он работает открыто поддерживает функциональность tab-in-tab.

Вот пример инструментов JQuery для разметки вложенных вкладок и скрипта.

...