0

我使用 Bootstrap 4.5.0 并尝试使用此Bootstrap 表单向导（版本 1.4.2）。

要浏览不同的选项卡，JS 应该向当前步骤的 -元素添加一个class="active"<li>属性。相反 - 由于某种我无法弄清楚的原因 - 它将属性添加到<li>-element 的 child element <a>。这会导致导航药丸的样式不正确，并且上一个/下一个按钮无法正常工作。我使用 Chrome 浏览器的开发人员工具手动添加/删除了所需的属性，并确认显然，如果class="active"属性附加到<li>-element，一切都会正常进行。

任何想法为什么将类添加到错误的元素以及如何防止它？

这是我的 HTML 标记：

<div id="rootWizard">
    <div class="form-bootstrapWizard">
        <ul class="bootstrapWizard form-wizard">
            <li data-target="#step1" class="active">
                <a href="#tab1" data-toggle="tab"> 
                    <span class="step">1</span>
                    <span class="title">Title of Step 1</span>
                </a>
            </li>
            <li data-target="#step2">
                <a href="#tab2" data-toggle="tab"> 
                    <span class="step">2</span>
                    <span class="title">Title of Step 2</span>
                </a>
            </li>
            <li data-target="#step3">
                <a href="#tab3" data-toggle="tab">
                    <span class="step">3</span> 
                    <span class="title">Title of Step 3</span> 
                </a>
            </li>
            <li data-target="#step4">
                <a href="#tab4" data-toggle="tab"> 
                    <span class="step">4</span> 
                    <span class="title">Title of Step 4</span> 
                </a>
            </li> 
            <li data-target="#step5">
                <a href="#tab5" data-toggle="tab"> 
                    <span class="step">5</span> 
                    <span class="title">Title of Step 5</span> 
                </a> 
            </li>
        </ul>
        <div class="clearfix"></div>
    </div>

这就是我在 document.ready() 函数中初始化向导的方式：

$('#rootWizard').bootstrapWizard({
    tabClass: 'bootstrapWizard'

});
4

0 回答 0