Question

我使用bootstrap创建了一个nav-pills，并尝试将html文件加载到tab-content中。当我点击一个按钮时，我想加载x.html，当我点击另一个按钮时，我想加载y.html 。这两个html文件具有相同的代码，但内部段落内容不同。我在x.html之后加载y.html时遇到了麻烦。 y.html文件无法正常运行。有人能帮助我吗??

这是我的Nav-pills和标签内容的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>

这是我在点击按钮时加载html文件的jquery：

 <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

Answer 1

问题在于id值。

像这样更改html

y.html

中的

<ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#cppy">C++</a></li> <li><a data-toggle="tab" href="#javay">Java</a></li> <li><a data-toggle="tab" href="#pythony">Python</a></li> </ul>

<div class="tab-content">
    <div id="cppy" 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="javay" 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="pythony" 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>

对z.html文件执行相同操作，但更改id值。

如何使用jquery将html文件加载到tab-content中

1 个答案: