0

我正在使用 jquery SmartWizard 控件并希望垂直显示工具栏,其中每个选项卡的内容都在右侧。但是当我运行下面的代码时,我收到错误“找不到元素 .nav”。我究竟做错了什么?任何帮助表示赞赏。是否可以让 smartwizard 垂直显示标签内容到一边。

@model ApplicationViewModel



<div id="smartwizard">
    <h3>Application</h3>
    <div class="row">
        <div class="col-3">
            <ul class="nav flex-column nav-pills">
                <li>
                    <a class="nav-link" href="#step-1">
                        Personal Information
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="#step-2">
                        Education
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="#step-3">
                        Professional Experience
                    </a>
                </li>
                <li>
                    <a class="nav-link" href="#step-4">
                        Business and Finanical Information
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-9">
            <div class="tab-content">
                <div id="step-1" class="tab-pane" role="tabpanel">
                    <partial name="_PersonalInfo" model="Model" />
                </div>
                <div id="step-2" class="tab-pane" role="tabpanel">
                    Education
                </div>
                <div id="step-3" class="tab-pane" role="tabpanel">
                    Professional Experience
                </div>
                <div id="step-4" class="tab-pane" role="tabpanel">
                    Business and Finanical Information
                </div>
            </div>
        </div>
    </div>
</div>
    @section scripts{

        <script>
    $(document).ready(function () {

        // SmartWizard initialize
        $('#smartwizard').smartWizard({
            toolbarSettings: {
                toolbarButtonPosition: 'right', // left, right, center
                showNextButton: true, // show/hide a Next button
                showPreviousButton: false, // show/hide a Previous button
                toolbarExtraButtons: [$('<button></button>').text('Save')
                    .addClass('btn btn-info')
                  ] // Extra buttons to show on toolbar, array of jQuery input/buttons elements
            }
        });

      

    });
        </script>
    }
4

0 回答 0