javascript - vertical - tabs html



التمهيد التمهيد كلف مع فئات الانهيار (1)

تمكنت من الحصول على هذا العمل لكنه يتطلب بعض التغييرات الطفيفة في الترميز بالإضافة إلى بعض التعليمات البرمجية مسج مخصصة.

وهنا كمان تحديثها . لاحظ أن كس تم تحديثه أيضا لاستيعاب التغييرات الترميز.

في ما يلي الشفرة الناتجة:

HTML

<div class="row">
    <div class="span4">
        <div class="side-nav-container affix-top">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a>
                    <ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
                        <li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li>
                    </ul>
                </li>
                <li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
                <li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
                <li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
            </ul>
        </div>
    </div>
    <div class="span8">
        <div class="tab-content">
            <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
            <div class="tab-pane fade" id="Subtab2">Content 1b</div>
            <div class="tab-pane fade" id="Subtab3">Content 1c</div>
            <div class="tab-pane fade" id="Tab2">Content 2</div>
            <div class="tab-pane fade" id="Tab3">Content 3</div>
            <div class="tab-pane fade" id="Tab4">Content 4</div>
        </div>
    </div>
</div>

مسج

$('.nav-tabs [data-toggle="collapse"]').on('click', function () {
    //Prevent the subnav from collapsing
    if ($($(this).attr('href')).hasClass('in')) return false;
    //Make collapse links act like tabs
    $(this).parent().addClass('active').siblings('li').removeClass('active');
    //Activate first subtab
    $($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');
});

$('.nav-tabs > li > a').on('click', function () {
    //Hide any open subnav only if it's not the collapse link
    //also deactivate any active subtab
    if ($(this).data('toggle') != 'collapse') {
        $(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');
    }
});

لقد كنت أحاول الحصول على نظام تنقل مبوب يعمل يسمح للمستخدم بانهاء علامات التبويب إلى عناوين الفئات. ومن الناحية المثالية، ستغلق الفئات تلقائيا إذا حددت علامة تبويب خارجها، وستبدو على شكل علامة تبويب محددة وحدد علامة التبويب الأولى في مجموعتها عند تحديدها.

اعتبارا من الآن، لدي الملاحة تعمل مع القدرة على إظهار وإخفاء علامات تبويب معينة وجميع علامات التبويب العمل، ولكن هو علاج علامات التبويب داخل المجموعة القابلة للطي كمجموعة مختلفة من تلك خارجها، وعلى هذا النحو، لا عدم إلغاء تحديد علامات التبويب بشكل صحيح. كنت أحاول معالجة هذا باستخدام جافا سكريبت، لكنني لم أحسب طريقة. أي أفكار في هذا سيكون موضع تقدير كبير.

رابط إلى رمز على جسفيدل .

<div class="row">
<div class="span4">
    <div class="side-nav-container affix-top">
        <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a>
            </li>
            <div id="Tab1" class="collapse in">
                <ul class="nav nav-tabs nav-stacked" id="subnav">
                    <li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
                    <li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li>
                    <li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li>
                </ul>
            </div>
            <li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
            <li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
            <li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
        </ul>
    </div>
</div>
<div class="span8">
    <div class="tab-content">
        <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
        <div class="tab-pane fade" id="Subtab2">Content 1b</div>
        <div class="tab-pane fade" id="Subtab3">Content 1c</div>
        <div class="tab-pane fade" id="Tab2">Content 2</div>
        <div class="tab-pane fade" id="Tab3">Content 3</div>
        <div class="tab-pane fade" id="Tab4">Content 4</div>
    </div>
</div>





tabs