禁用引导选项卡而不破坏向导中的分页

时间：2018-02-23 15:53:24

标签： javascript css twitter-bootstrap twitter-bootstrap-wizard

出于某种原因，我需要在this question中禁用点按标签。

是否可以在不破坏向导的情况下禁用引导向导选项卡单击和光标指针？

启用了标签的向导：

$(function () {
    const wizard = $('#wizard');
    wizard.bootstrapWizard({
        'tabClass': 'nav nav-pills',
        onTabShow: function(tab, navigation, index) {
            const $total = navigation.find('li').length;
            const $current = index + 1;

            // If it's the last tab then hide the last button and show the finish instead
            const pager = wizard.find('.pager');
            if ($current >= $total) {
                pager.find('.next').hide();
                pager.find('.finish').show();
                pager.find('.finish').removeClass('disabled');
            } else {
                pager.find('.next').show();
                pager.find('.finish').hide();
            }
        }});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

当前解决方法

$(function () {
    const wizard = $('#wizard');
    wizard.bootstrapWizard({
        'tabClass': 'nav nav-pills',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        onTabShow: function(tab, navigation, index) {
            const $total = navigation.find('li').length;
            const $current = index + 1;

            // If it's the last tab then hide the last button and show the finish instead
            const pager = wizard.find('.pager');
            if ($current >= $total) {
                pager.find('.next').hide();
                pager.find('.finish').show();
                pager.find('.finish').removeClass('disabled');
            } else {
                pager.find('.next').show();
                pager.find('.finish').hide();
            }
        }});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

这会禁用对标签的点击，但会附加cursor: pointer和点击事件监听器。

我的尝试

获得了必需的标签行为，但向导已损坏

$(function () {
        const wizard = $('#wizard');
        wizard.bootstrapWizard({
            'tabClass': 'nav nav-pills',
            onTabShow: function(tab, navigation, index) {
                const $total = navigation.find('li').length;
                const $current = index + 1;

                // If it's the last tab then hide the last button and show the finish instead
                const pager = wizard.find('.pager');
                if ($current >= $total) {
                    pager.find('.next').hide();
                    pager.find('.finish').show();
                    pager.find('.finish').removeClass('disabled');
                } else {
                    pager.find('.next').show();
                    pager.find('.finish').hide();
                }
            }});
    })
#wizard ul li a {
    pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="wizard">
    <ul>
        <li><a href="#tab1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
        <li><a href="#tab4" data-toggle="tab">Tab 4</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab1" disabled="disabled">
            Tab 1
        </div>
        <div class="tab-pane" id="tab2" disabled="disabled">
            Tab 2
        </div>        
        <div class="tab-pane" id="tab3" disabled="disabled">
            Tab 3
        </div>
        <div class="tab-pane" id="tab4" disabled="disabled">
            Tab 4
        </div>
        <ul class="pager wizard">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
            <li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
        </ul>
    </div>
</div>

是否可以像我的尝试一样禁用标签但是使用工作向导？

P.S：它与{{3}}

特别相关

0 个答案:

没有答案
相关问题
最新问题