-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