-1
我使用bootstrap創建了一個nav-pills，並嘗試將html文件加載到選項卡內容中。當我點擊一個按鈕時，我想加載x.html，以及何時我點擊另一個按鈕，我想加載y.html。這兩個html文件具有相同的代碼，但段落內容不同。在x.html之後加載y.html時，我遇到了麻煩。 y.html文件無法正常工作。有人能幫我嗎？？如何使用jquery將html文件加載到選項卡內容
這是NAV-藥丸和標籤內容我的html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<h2>Array Operations</h2>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" id="Home" href="#home">Creation</a></li>
<li><a data-toggle="pill" id="Menu1" href="#menu1">Insertion</a></li>
<li><a data-toggle="pill" id="Menu2" href="#menu2">Deletion</a></li>
<li><a data-toggle="pill" id="Menu3" href="#menu3">Searching</a></li>
<li><a data-toggle="pill" id="Menu4" href="#menu4">Sorting</a></li>
</ul>
</div>
<div class="col-sm-9">
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>Create</h3>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Insert</h3>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Delete</h3>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Search</h3>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Sort</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
這是我的jQuery加載按鈕點擊HTML文件：
<script>
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#Menu1').click(function() {
$("#menu1").load("y.html");
});
$('a#Menu2').click(function() {
$("#menu2").load("z.html");
});
</script>
這是我x.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Creation</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#cpp">C++</a></li>
<li><a data-toggle="tab" href="#java">Java</a></li>
<li><a data-toggle="tab" href="#python">Python</a></li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="java" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="python" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
這是我y.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="container">
<h2>Insertion</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#cpp">C++</a></li>
<li><a data-toggle="tab" href="#java">Java</a></li>
<li><a data-toggle="tab" href="#python">Python</a></li>
</ul>
<div class="tab-content">
<div id="cpp" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="java" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="python" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>
任何人都可以在這裏嘗試執行此snipet代碼：
https://plnkr.co/edit/qHFvGVonWgLYVE51dhaP?p=gitter
plnkr是什麼問題？ – guest271314
當我加載x.html時，我可以在C++，Java和Python之間導航，但是當我加載y.html時，我無法在C++，Java和Python之間導航。 – toni
'y.html'被加載點擊'「插入''，是嗎？或者你的意思是'z.html'有問題嗎？ – guest271314