0
我正在用引導和jQuery構建一個側欄應用程序，並且由於某種原因，當我移動到一個頁面時，我無法返回到目錄頁面。有人可以回答我爲什麼不能回到目錄頁面嗎？謝謝。試圖回到目錄，但鏈接不起作用
tableOfContents.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Syniverse Technical Training</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/myStyles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--optional logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="images/justSyniverse.png" width="169" height="43"></a>
</div>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" class="list-group">
<a href="tableOfContents.html" class="list-group-item active">
<i class="icon-dashboard"></i> Table of Contents
</a>
<a href="#ansible" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Ansible
<span class="badge bg_danger"></span>
</a>
<div id="ansible" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=WhatIsAnsible" class="list-group-item">
<i class="icon-caret-right"></i> What is Ansible?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=GettingStarted" class="list-group-item">
<i class="icon-caret-right"></i> Getting Started w/ Ansible
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Group
</a>
</div>
<a href="#articles" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-file-text"></i> Articles
<span class="badge bg_danger"></span>
</a>
<div id="articles" class="list-group subitem collapse">
<a href="#" class="list-group-item bg_warning">
<i class="icon-caret-right"></i> Edit Article
<span class="badge bg_danger"></span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Article
</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Technical Training Videos</h1>
<p>These technical training videos are presented to give you background, beginner, and sometimes intermediate and advanced training on apps within your department. All videos shown here are available on youtube.com or publicy available from other sites. </p>
<!--<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>-->
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
playVideoPage.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Play Video</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/myStyles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!--optional logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand"><img src="images/justSyniverse.png" width="169" height="43"></a>
</div>
</div>
</nav>
<div id="wrapper">
<div id="sidebar-wrapper" class="list-group">
<a href="tableOfContents.html" class="list-group-item active">
<i class="icon-dashboard"></i> Table of Contents
</a>
<a href="#users" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-group"></i> Ansible
<span class="badge bg_danger"></span>
</a>
<div id="users" class="list-group subitem collapse">
<a href="playVideoPage.html?Title=WhatIsAnsible" class="list-group-item">
<i class="icon-caret-right"></i> What is Ansible?
<span class="badge bg_danger"></span>
</a>
<a href="playVideoPage.html?Title=GettingStarted" class="list-group-item">
<i class="icon-caret-right"></i> Getting Started w/ Ansible
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Group
</a>
</div>
<a href="#articles" class="list-group-item" data-parent="#sidebar-wrapper">
<i class="icon-file-text"></i> Articles
<span class="badge bg_danger"></span>
</a>
<div id="articles" class="list-group subitem collapse">
<a href="#" class="list-group-item bg_warning">
<i class="icon-caret-right"></i> Edit Article
<span class="badge bg_danger"></span>
</a>
<a href="#" class="list-group-item">
<i class="icon-caret-right"></i> Create Article
</a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1>Video Plays here</h1>
<p>Lorem ipsum... </p>
<!--<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p>-->
<a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<script src="js/init.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Menu Toggle Script -->
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
</script>
</body>
</html>
init.js
$(document).ready(function(){
$('#sidebar-wrapper > a').on('click', function (e) {
e.preventDefault();
if(!$(this).hasClass("active")){
var lastActive = $(this).closest("#sidebar-wrapper").children(".active");
lastActive.removeClass("active");
lastActive.next('div').collapse('hide');
$(this).addClass("active");
$(this).next('div').collapse('show');
}
});
});
這似乎不是爲了回答這個問題。你應該改爲做一個評論。 –