我正在使用 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>
}