引导向导下一个按钮不起作用答案

【问题标题】：Bootstrap Wizard next button not working引导向导下一个按钮不起作用
【发布时间】：2018-08-16 06:08:21
【问题描述】：

我整晚都在尝试调试这段代码，并且尝试了很多方法。

首先我遇到的问题是我使用的是引导管理模板，并且包含了一个表单向导来逐步浏览表单的各个部分。我正在使用 ASP.net 和一个主表单（它包含引导菜单和导航栏。

问题是我添加向导后，单击下一步按钮时它不起作用。我使用了模板提供的向导的确切代码，并且按照下面的代码。仍然不起作用（模板工作正常，但不在 ASP.net 中，而是在 HTML 文件中，所以不确定这是否是一个问题）。

页面上的其余 java 脚本可以正常工作，即导航栏折叠和菜单展开。我尝试过但不限于：

向向导 JS 添加直接网络链接
重新排列对 Java 脚本的引用顺序
删除步骤中的所有控件并尝试作为空白向导

我真的迷路了，我已经想到了所有可能的选择

由于我可以在此表单中添加大量文本，我不得不将我的代码添加到 Jfiddle，如下链接所示：

这是我的 ASP.net 网络表单

jsfiddle.net/Tees101/2vmzLjhv

这是我的主表单

jsfiddle.net/Tees101/s7q4b2ed

【问题讨论】：

您的小提琴在标签中使用了 asp.net 代码，我认为 jsfiddle 不会正确呈现它。尝试用没有 ASP 代码的纯 html 编写它。将您的场景简化到最低限度，这可能有助于您找到问题的根本原因。
点击next按钮后出现什么样的错误？在 chrome 上查看
我没有收到错误，只是没有响应

标签： jquery html css asp.net twitter-bootstrap

【解决方案1】：

在您的 HTML/Asp.net 页面底部添加以下行，就在关闭正文标记上方</body> 以解决问题。

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

将 3.3.0 和 1.11.1 替换为您在项目中使用的正确版本。

【讨论】：

【解决方案2】：

您的代码排列不正确。

母版页应包含将在整个页面中使用的所有全局 .css 和 .js 文件。您正在做的是将这些全局文件保留在内容页面上。

如果需要，内容页面还应包含页面级别的 html，然后在头部占位符中包含 .css 和 .js 文件。您将整个 .css 和 .js 填充到单个内容页面。

您可以按如下方式安排您的代码，以便 .css 和 .js 文件能够正确加载，并有望解决您的向导无法正常工作的问题。

同样重要的是通过 Page.Resolve 方法解析 URL 来加载 .js 文件

母版页

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="main.master.vb" Inherits="iconHub.main" %>

<!DOCTYPE html>
<html>
<head runat="server">

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <!--[if IE 9 ]><html class="ie ie9" lang="en" class="no-js"> <![endif]-->
    <!--[if !(IE)]><!-->
    <!--<![endif]-->

    <link href="~/YOUR_PATH/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="~/YOUR_PATH/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="~/YOUR_PATH/main.css" rel="stylesheet" type="text/css">
    <link href="~/YOUR_PATH/my-custom-styles.css" rel="stylesheet" type="text/css">

    <!--[if lte IE 9]>
        <link href="assets/css/main-ie.css" rel="stylesheet" type="text/css"/>
        <link href="assets/css/main-ie-part2.css" rel="stylesheet" type="text/css"/>
    <![endif]-->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="~/YOUR_PATH/ico/kingadmin-favicon144x144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="~/YOUR_PATH/ico/kingadmin-favicon114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="~/YOUR_PATH/ico/kingadmin-favicon72x72.png">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="~/YOUR_PATH/ico/kingadmin-favicon57x57.png">

    <link rel="shortcut icon" href="../ico/favicon.png">

    <asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder>  
</head>
<body>
    <form id="mainForm" runat="server">

        <!-- navbar -->
        <div style="position: absolute; height: 25px; width: 100%;">
            <div class="top-bar navbar-fixed-top">
                <div class="container">
                    <div class="clearfix">
                        <a href="#" class="pull-left toggle-sidebar-collapse"><i class="fa fa-bars"></i></a>
                        <div class="pull-left left logo">
                            <a href="index.html"><img src="~/YOUR_PATH/img/kingadmin-logo-white.png" alt="Admin Dashboard" /></a>
                            <h1 class="sr-only">Admin Dashboard</h1>
                        </div>
                        <div class="pull-right right">
                            <div class="searchbox">
                                <div id="tour-searchbox" class="input-group">
                                    <input type="search" class="form-control" placeholder="enter keyword here...">
                                    <span class="input-group-btn">
                                                <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
                                            </span>
                                </div>
                            </div>
                            <div class="top-bar-right">
                                <button type="button" id="start-tour" class="btn btn-link"><i class="fa fa-refresh"></i>Start Tour</button>
                                <button type="button" id="global-volume" class="btn btn-link btn-global-volume"><i class="fa"></i></button>
                                <div class="notifications">
                                    <ul>
                                        <li class="notification-item inbox">
                                            <div class="btn-group">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                            <i class="fa fa-envelope"></i><span class="count">2</span>
                                                            <span class="circle"></span>
                                                        </a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li class="notification-header">
                                                        <em>You have 2 unread messages</em>
                                                    </li>
                                                    <li class="inbox-item clearfix">
                                                        <a href="#">
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <img class="media-object" src="~/YOUR_PATH/img/user1.png" alt="Antonio">
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5 class="media-heading name">Antonius</h5>
                                                                    <p class="text">The problem just happened this morning.</p>
                                                                    <span class="timestamp">4 minutes ago</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="inbox-item unread clearfix">
                                                        <a href="#">
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <img class="media-object" src="~/YOUR_PATH/img/user2.png" alt="Antonio">
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5 class="media-heading name">Michael</h5>
                                                                    <p class="text">Hey dude, cool theme!</p>
                                                                    <span class="timestamp">2 hours ago</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="inbox-item unread clearfix">
                                                        <a href="#">
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <img class="media-object" src="../img/user3.png" alt="Antonio">
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5 class="media-heading name">Stella</h5>
                                                                    <p class="text">Ok now I can see the status for each item. Thanks! :D</p>
                                                                    <span class="timestamp">Oct 6</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="inbox-item clearfix">
                                                        <a href="#">
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <img class="media-object" src="~/YOUR_PATH/img/user4.png" alt="Antonio">
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5 class="media-heading name">Jane Doe</h5>
                                                                    <p class="text"><i class="fa fa-reply"></i>Please check the status of</p>
                                                                    <span class="timestamp">Oct 2</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="inbox-item clearfix">
                                                        <a href="#">
                                                            <div class="media">
                                                                <div class="media-left">
                                                                    <img class="media-object" src="~/YOUR_PATH/img/user5.png" alt="Antonio">
                                                                </div>
                                                                <div class="media-body">
                                                                    <h5 class="media-heading name">John Simmons</h5>
                                                                    <p class="text"><i class="fa fa-reply"></i>I've fixed the problem :)</p>
                                                                    <span class="timestamp">Sep 12</span>
                                                                </div>
                                                            </div>
                                                        </a>
                                                    </li>
                                                    <li class="notification-footer">
                                                        <a href="#">View All Messages</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                        <li class="notification-item general">
                                            <div class="btn-group">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                                            <i class="fa fa-bell"></i><span class="count">8</span>
                                                            <span class="circle"></span>
                                                        </a>
                                                <ul class="dropdown-menu" role="menu">
                                                    <li class="notification-header">
                                                        <em>You have 8 notifications</em>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-comment green-font"></i>
                                                                    <span class="text">New comment on the blog post</span>
                                                                    <span class="timestamp">1 minute ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-user green-font"></i>
                                                                    <span class="text">New registered user</span>
                                                                    <span class="timestamp">12 minutes ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-comment green-font"></i>
                                                                    <span class="text">New comment on the blog post</span>
                                                                    <span class="timestamp">18 minutes ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-shopping-cart red-font"></i>
                                                                    <span class="text">4 new sales order</span>
                                                                    <span class="timestamp">4 hours ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-edit yellow-font"></i>
                                                                    <span class="text">3 product reviews awaiting moderation</span>
                                                                    <span class="timestamp">1 day ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-comment green-font"></i>
                                                                    <span class="text">New comment on the blog post</span>
                                                                    <span class="timestamp">3 days ago</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-comment green-font"></i>
                                                                    <span class="text">New comment on the blog post</span>
                                                                    <span class="timestamp">Oct 15</span>
                                                                </a>
                                                    </li>
                                                    <li>
                                                        <a href="#">
                                                                    <i class="fa fa-warning red-font"></i>
                                                                    <span class="text red-font">Low disk space!</span>
                                                                    <span class="timestamp">Oct 11</span>
                                                                </a>
                                                    </li>
                                                    <li class="notification-footer">
                                                        <a href="#">View All Notifications</a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="logged-user">
                                    <div class="btn-group">
                                        <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                                                    <img src="~/YOUR_PATH/img/user-avatar.png" alt="User Avatar" />
                                                    <span class="name">Stacy Rose</span> <span class="caret"></span>
                                                </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#">
                                                            <i class="fa fa-user"></i>
                                                            <span class="text">Profile</span>
                                                        </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                            <i class="fa fa-cog"></i>
                                                            <span class="text">Settings</span>
                                                        </a>
                                            </li>
                                            <li>
                                                <a href="#">
                                                            <i class="fa fa-power-off"></i>
                                                            <span class="text">Logout</span>
                                                        </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- sidebar -->
        <div class="" style="width: 150px; top: 40px; position: absolute;">
            <div id="left-sidebar" class="left-sidebar ">
                <!-- main-nav -->
                <div class="sidebar-scroll">
                    <nav class="main-nav">
                        <ul class="main-menu">
                            <li class="active"><a href="#" class="js-sub-menu-toggle"><i class="fa fa-dashboard fa-fw"></i><span class="text">Dashboard</span>
                                        <i class="toggle-icon fa fa-angle-down"></i></a>
                                <ul class="sub-menu open">
                                    <li class="active"><a href="index.html"><span class="text">Dashboard v1</span></a></li>
                                    <li><a href="~/YOUR_PATH/Pages/index-transparent.html"><span class="text">Dashboard v1 Transp.</span></a></li>
                                    <li><a href="~/YOUR_PATH/Pages/index-dashboard-v2.html"><span class="text">Dashboard v2</span></a></li>
                                    <li><a href="~/YOUR_PATH/Pages/index-dashboard-v2-transparent.html"><span class="text">Dashboard v2 Trans.</span></a></li>
                                    <li><a href="~/YOUR_PATH/Pages/index-dashboard-v3.html"><span class="text">Dashboard v3</span></a></li>
                                    <li><a href="~/YOUR_PATH/Pages/index-dashboard-v4.html"><span class="text">Dashboard v4 <span class="badge element-bg-color-blue">New</span></span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-navicon"></i><span class="text">Navigations <span class="badge element-bg-color-blue">New</span></span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="nav-default-fixed.html"><span class="text">Default Fixed Sidebar</span></a></li>
                                    <li><a href="nav-normal.html"><span class="text">Normal Sidebar</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-columns"></i><span class="text">Layouts <span class="badge element-bg-color-blue">New</span></span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="layout-collapsed.html"><span class="text">Collapsed Sidebar</span></a></li>
                                    <li><a href="layout-minified.html"><span class="text">Minified Sidebar</span></a></li>
                                    <li><a href="layout-ontop-navigation.html"><span class="text">On-Top Navigation</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-clipboard fa-fw"></i><span class="text">Pages</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="page-profile.html"><span class="text">Profile</span></a></li>
                                    <li><a href="page-invoice.html"><span class="text">Invoice</span></a></li>
                                    <li><a href="page-knowledgebase.html"><span class="text">Knowledge Base</span></a></li>
                                    <li><a href="page-new-message.html"><span class="text">New Message</span></a></li>
                                    <li><a href="page-view-message.html"><span class="text">View Message</span></a></li>
                                    <li><a href="page-search-result.html"><span class="text">Search Result</span></a></li>
                                    <li><a href="page-submit-ticket.html"><span class="text">Submit Ticket</span></a></li>
                                    <li><a href="page-faq.html"><span class="text">FAQ</span></a></li>
                                    <li><a href="page-register.html"><span class="text">Register</span></a></li>
                                    <li><a href="page-register-transparent.html"><span class="text">Register Transparent</span></a></li>
                                    <li><a href="page-login.html"><span class="text">Login</span></a></li>
                                    <li><a href="page-login-transparent.html"><span class="text">Login Transparent</span></a></li>
                                    <li><a href="page-404.html"><span class="text">404</span></a></li>
                                    <li><a href="page-404-transparent.html"><span class="text">404 Transparent</span></a></li>
                                    <li><a href="page-blank.html"><span class="text">Blank Page</span></a></li>
                                </ul>
                            </li>
                            <li><a href="page-inbox.html"><i class="fa fa-envelope-o"></i><span class="text">Inbox <span class="badge red-bg">32</span></span></a></li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-file"></i><span class="text">File Manager</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="page-file-manager.html"><span class="text">Default</span></a></li>
                                    <li><a href="page-file-manager-transparent.html"><span class="text">Transparent</span></a></li>
                                </ul>
                            </li>
                            <li><a href="page-projects.html"><i class="fa fa-briefcase"></i><span class="text">Projects</span></a></li>
                            <li><a href="page-project-detail.html"><i class="fa fa-tasks"></i><span class="text">Project Detail</span></a></li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-bar-chart-o fw"></i><span class="text">Charts &amp; Statistics</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="charts-statistics.html"><span class="text">Charts</span></a></li>
                                    <li><a href="charts-statistics-transparent.html"><span class="text">Charts Transparent</span></a></li>
                                    <li><a href="charts-statistics-interactive.html"><span class="text">Interactive Charts</span></a></li>
                                    <li><a href="charts-statistics-interactive-transparent.html"><span class="text">Interactive Charts Transparent</span></a></li>
                                    <li><a href="charts-statistics-real-time.html"><span class="text">Realtime Charts</span></a></li>
                                    <li><a href="charts-statistics-real-time-transparent.html"><span class="text">Realtime Charts Transparent</span></a></li>
                                    <li><a href="charts-d3charts.html"><span class="text">D3 Charts</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-edit fw"></i><span class="text">Forms</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="form-inplace-editing.html"><span class="text">In-place Editing</span></a></li>
                                    <li><a href="form-elements.html"><span class="text">Form Elements</span></a></li>
                                    <li><a href="form-layouts.html"><span class="text">Form Layouts</span></a></li>
                                    <li><a href="form-bootstrap-elements.html"><span class="text">Bootstrap Elements</span></a></li>
                                    <li><a href="form-validations.html"><span class="text">Validation</span></a></li>
                                    <li><a href="form-file-upload.html"><span class="text">File Upload</span></a></li>
                                    <li><a href="form-text-editor.html"><span class="text">Text Editor</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-list-alt fw"></i><span class="text">UI Elements</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="ui-elements-general.html"><span class="text">General Elements</span></a></li>
                                    <li><a href="ui-elements-tabs.html"><span class="text">Tabs</span></a></li>
                                    <li><a href="ui-elements-buttons.html"><span class="text">Buttons</span></a></li>
                                    <li><a href="ui-elements-icons.html"><span class="text">Icons <span class="badge element-bg-color-blue">Updated</span></span></a></li>
                                    <li><a href="ui-elements-flash-message.html"><span class="text">Flash Message</span></a></li>
                                </ul>
                            </li>
                            <li><a href="widgets.html"><i class="fa fa-puzzle-piece fa-fw"></i><span class="text">Widgets</span></a></li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-gears fw"></i><span class="text">Components</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="components-wizard.html"><span class="text">Wizard (with validation)</span></a></li>
                                    <li><a href="components-calendar.html"><span class="text">Calendar</span></a></li>
                                    <li><a href="components-maps.html"><span class="text">Maps</span></a></li>
                                    <li><a href="components-maps-transparent.html"><span class="text">Maps Transparent</span></a></li>
                                    <li><a href="components-gallery.html"><span class="text">Gallery</span></a></li>
                                    <li><a href="components-tree-view.html"><span class="text">Tree View </span></a></li>
                                    <li><a href="components-tree-view-transparent.html"><span class="text">Tree View Transparent</span></a></li>
                                </ul>
                            </li>
                            <li><a href="#" class="js-sub-menu-toggle"><i class="fa fa-table fw"></i><span class="text">Tables</span>
                                        <i class="toggle-icon fa fa-angle-left"></i></a>
                                <ul class="sub-menu ">
                                    <li><a href="tables-static-table.html"><span class="text">Static Table</span></a></li>
                                    <li><a href="tables-dynamic-table.html"><span class="text">Dynamic Table</span></a></li>
                                </ul>
                            </li>
                            <li><a href="typography.html"><i class="fa fa-font fa-fw"></i><span class="text">Typography</span></a></li>
                            <li>
                                <a href="#" class="js-sub-menu-toggle"><i class="fa fa-bars"></i>
                                            <span class="text">Menu Lvl 1</span>
                                            <i class="toggle-icon fa fa-angle-left"></i>
                                        </a>
                                <ul class="sub-menu">
                                    <li class="">
                                        <a href="#" class="js-sub-menu-toggle">
                                                    <span class="text">Menu Lvl 2</span>
                                                    <i class="toggle-icon fa fa-angle-left"></i>
                                                </a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Menu Lvl 3</a></li>
                                            <li><a href="#">Menu Lvl 3</a></li>
                                            <li><a href="#">Menu Lvl 3</a></li>
                                        </ul>
                                    </li>
                                    <li>
                                        <a href="#">
                                                    <span class="text">Menu Lvl 2</span>
                                                </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        <!-- mainbody -->
        <div style="padding-top: 35px;">
            <asp:ContentPlaceHolder ID="mainbody" runat="server"></asp:ContentPlaceHolder>
        </div>

    </form> 
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/jquery/jquery-2.1.0.min.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/bootstrap/bootstrap.min.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/plugins/wizard/wizard.min.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/plugins/modernizr/modernizr.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/plugins/jquery-slimscroll/jquery.slimscroll.min.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/king-common.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/plugins/parsley-validation/parsley.min.js") %>"></script>
    <script src="<%= Page.ResolveUrl("~/YOUR_PATH/Scripts/king-components.js") %>"></script>
</body>
</html>

内容页面

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Pages/MasterPages/main.Master" CodeBehind="default.aspx.vb" Inherits="iconHub._default" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"></asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="mainbody" runat="server">

    <div id="wrapper" class="wrapper">
        <div id="main-content-wrapper" class="content-wrapper ">
            <div class="row">
                <div class="col-lg-4 ">
                    <ul class="breadcrumb">
                        <li><i class="fa fa-home"></i><a href="#">Home</a></li>
                        <li><a href="#">Components</a></li>
                        <li class="active">Wizard</li>
                    </ul>
                </div>
                <div class="col-lg-8 ">
                </div>
            </div>
            <div class="content">
                <div class="main-header">
                    <h2>Wizard</h2>
                    <em>wizard with validation</em>
                </div>
                <div class="main-content">
                    <div class="widget">
                        <div class="widget-header">
                            <h3><i class="fa fa-magic"></i> Wizard</h3>
                        </div>
                        <div class="widget-content">
                            <div class="wizard-wrapper">
                                <div id="demo-wizard" class="wizard">
                                    <ul class="steps">
                                        <li data-target="#step1" class="active"><span class="badge badge-info">1</span>Account Type<span class="chevron"></span></li>
                                        <li data-target="#step2"><span class="badge">2</span>User Account<span class="chevron"></span></li>
                                        <li data-target="#step3"><span class="badge">3</span>Options<span class="chevron"></span></li>
                                        <li data-target="#step4" class="last"><span class="badge">4</span>Create Account</li>
                                    </ul>
                                </div>
                                <div class="step-content">
                                    <div class="step-pane active" id="step1">
                                        <form id="form1" data-parsley-validate novalidate>
                                            <p>Choose your account type:</p>
                                            <label class="fancy-radio">
                                              <input type="radio" name="account-type" value="personal" required data-parsley-errors-container="#error-step1">
                                              <span><i></i>Personal</span>
                                            </label>
                                                            <label class="fancy-radio">
                                              <input type="radio" name="account-type" value="business">
                                              <span><i></i>Business</span>
                                            </label>
                                                            <label class="fancy-radio">
                                              <input type="radio" name="account-type" value="enterprise">
                                              <span><i></i>Enterprise</span>
                                            </label>
                                            <p id="error-step1"></p>
                                        </form>
                                    </div>
                                    <div class="step-pane" id="step2">
                                        <form id="form2" data-parsley-validate novalidate>
                                            <p>
                                                Please provide email, username and password
                                                <br />
                                                <em><small>Field marked * is required</small></em>
                                            </p>
                                            <div class="row">
                                                <div class="col-md-3">
                                                    <div class="form-group">
                                                        <label for="email">Email *</label>
                                                        <input type="email" id="email" class="form-control" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="password">Password *</label>
                                                        <input type="password" id="password" name="password" class="form-control" required>
                                                    </div>
                                                    <div class="form-group">
                                                        <label for="password2">Repeat Password *</label>
                                                        <input type="password" id="password2" name="password2" class="form-control" required data-parsley-equalto="#password" data-parsley-equalto-message="Password doesn't match.">
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="step-pane" id="step3">
                                        <form id="form3" data-parsley-validate novalidate>
                                            <label class="fancy-checkbox">
                                              <input type="checkbox" name="newsletter">
                                              <span>Subscribe to monthly newsletter</span>
                                            </label>
                                                            <label class="fancy-checkbox">
                                              <input type="checkbox" name="terms">
                                              <span>I accept the <a href="#">Terms &amp; Agreements</a></span>
                                            </label>
                                        </form>
                                    </div>
                                    <div class="step-pane" id="step4">
                                        <p class="lead"><i class="fa fa-check-circle text-success"></i> All is well! Click "Create My Account" to complete.</p>
                                    </div>
                                </div>
                                <div class="actions">
                                    <button type="button" class="btn btn-default btn-prev"><i class="fa fa-arrow-left"></i> Prev</button>
                                    <button type="button" class="btn btn-primary btn-next">Next <i class="fa fa-arrow-right"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <footer class="footer">&copy; 2017</footer>
        </div>
    </div>

</asp:Content>

【讨论】：

感谢您对代码非常有用的批评，我已经完成了更改，我的 Nabar 折叠和菜单 Cordian 仍然像以前一样工作，但向导仍然无法工作。
您还有什么建议吗？我真的卡住了
我身边的三种可能的解决方法。首先通过转到页面源或浏览器开发工具的网络选项卡来检查所有 .js 文件是否已加载。第二次检查当您单击向导下一步按钮时是否出现任何错误，如果是，然后深入研究。第三次检查您的 html 元素是否按照向导完成并应用了相应的 css 类