Question

我想在标签页面中运行标签页。这是第一个没有问题的标签部分。

<div id="tabs2" class="tabs">

    <ul>
        <li class="skew-25 active">
            <a class="skew25" href="#"> 1 tab</a>
        </li>
        <li class="skew-25"></li>
        <li class="skew-25"></li>
    </ul>
    <div class="tabs-pane">
        <div class="tab-panel active" style="display: block;"> 1 tab output</div>
        <div class="tab-panel" style="display: none;">2 tab output</div>
        <div class="tab-panel" style="display: none;">3 tab output</div>
    </div>

</div>

现在我在上面的部分（称为“标签输出”）中包含另一个标签：

<div id="tabs4" class="tabs tabs-vertical">

    <ul>
        <li class="skew-25 active">tab within tab section</li>
        <li class="skew-25">
            <a class="skew25" href="#"></a>
        </li>
        <li class="skew-25"></li>
    </ul>
    <div class="tabs-pane">
        <div class="tab-panel active" style="display: block;">content</div>
        <div class="tab-panel" style="display: none;"></div>
        <div class="tab-panel" style="display: none;"></div>
    </div>

</div>

这第二个代码我包含在'1标签输出''2标签输出'和'3标签输出'

中

问题是，当应用于第一个选项卡中的选项卡时，它们将不会发送输出，无法选择或不活动。如何解决这个问题？

Javascripts是：

function(e) {
  if (!$(this).parent().hasClass('active')) {
    e.preventDefault();
    var ind = $(this).parent().index();
    tabsUl.find('li').removeClass('active');
    $(this).parent().addClass('active');
    tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
    tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
    return false;
  } else {
    return false;
  }
}

和

f = v.handle = function(e) {
  return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}

正常

/* ================ Tabs. ================ */
    $.fn.tabs = function(options) {
        var defaults = {
            direction: ''
        };
        var options = $.extend({}, defaults, options);
        if(options.direction == "vertical"){
            $(this).addClass('tabs-vertical');
        }
        var tabsUl = $(this).find(' > ul'),
            activeTab = tabsUl.find('li.active').index(),
            tabsPane = $(this).find('.tabs-pane');
        tabsPane.find('.tab-panel').fadeOut();
        tabsPane.find('.tab-panel').eq(activeTab).fadeIn();
        tabsUl.find('li').find('a').click(function(e){
            if(!$(this).parent().hasClass('active')){
                e.preventDefault();
                var ind = $(this).parent().index();
                tabsUl.find('li').removeClass('active');
                $(this).parent().addClass('active');
                tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
                tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
                return false;
            }else{
                return false;
            }
        });
    }

Answer 1

使用jQuery禁用div及其所有内容，如下所示： How to disable all div content

此外，您可以使用jQueryUI Tabs或Bootstrap tabs（同时explained here向下滚动到页面底部的Toggable Tabs部分，而不是所有js代码）。

如何在另一个选项卡中创建选项卡部分？

1 个答案: