我花了一整夜时间尝试调试此代码，我尝试了很多东西。
首先我遇到的问题是我使用的是bootstrap Admin模板，并且包含了一个Form向导来逐步执行表单的各个部分。我正在使用ASP.net和一个主表单（它包含引导菜单和导航栏。
问题是当我添加向导时，当我点击下一个按钮时它不起作用。我已经使用了模板提供的向导的确切代码，并且如下面的代码所示。仍然不起作用（模板工作正常，但不是在ASP.net而是HTML文件，因此不确定这是否是一个问题）。
页面上其余的java脚本工作，即Navbar折叠和菜单扩展。 我尝试但不限于：
我真的迷失了病房，我已经找到了我能想到的每一个可能的选择
由于我可以在此表单中添加的文本数量，我必须将我的代码添加到Jfiddle，如下面的链接：
这是我的ASP.net Webform
jsfiddle.net/Tees101/2vmzLjhv
这是我的主表格
jsfiddle.net/Tees101/s7q4b2ed
答案 0 :(得分：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替换为项目中使用的正确版本。
答案 1 :(得分：0)
您的代码配置不当。
母版页应包含将在整个页面中使用的所有全局.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 & 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 & 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">© 2017</footer>
</div>
</div>
</asp:Content>