Question

我是Bootstrap＆amp;的新手。制作一个简单的页面，我想要在菜单选项卡中给出的页面之间导航。我尝试了以下代码，但无法显示下一个选项卡的数据。请帮忙！

Home.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Home</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="panel panel-default">
<div class="panel-heading"><h1 align="center">Trial</h1></div>
<hr>
  <ul class="nav nav-pills nav-justified">
    <li class="active"><a data-toggle="pill" href="HomePage.php">Home</a></li>
    <li><a data-toggle="pill" href="Menu1.php">Menu1</a></li>
    <li><a data-toggle="pill" href="Menu2.php">Menu2</a></li>
    <li><a data-toggle="pill" href="Menu3.php">Menu3</a></li>
    <li><a data-toggle="pill" href="Logout.php">Logout</a></li>
  </ul>
<hr>
<div class="panel-body">
<h1 align="center">Please insert the introduction for bootstrap.</h1>
<p align="center">Hello, Welcome to Bootstrap!<br>
We trying to create this application via Bootstrap.<br>
Please read the steps carefully beofre using the application.
<ul>
<li>Step 1 :</li>
<li>Step 2 :</li>
<li>Step 3 :</li>
<li>Step 4 :</li>
<li>Step 5 :</li>
<li>Step 6 :</li>
<li>Step 7 :</li>
</ul></p>
</div>
<hr>
<div class="panel-footer" align="center">Copyright 2016</div>
</div>
</div>
</body>
</html>

Menu1.php

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Menu 1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="panel panel-default">
<div class="panel-heading"><h1 align="center">Trial</h1></div>
<hr>
  <ul class="nav nav-pills nav-justified">
    <li><a data-toggle="pill" href="HomePage.php">Home</a></li>
    <li><a data-toggle="pill" href="Menu1.php">Menu1</a></li>
    <li><a data-toggle="pill" href="Menu2.php">Menu2</a></li>
    <li><a data-toggle="pill" href="Menu3.php">Menu3</a></li>
    <li><a data-toggle="pill" href="Logout.php">Logout</a></li>
  </ul>
<hr>
<div class="panel-body">
<h1 align="center">Menu 1.</h1>
<p align="center">Hello, Welcome to Bootstrap!<br>
We trying to create this application via Bootstrap.<br>
Please read the steps carefully beofre using the application.
<ul>
<li>Step 1 :</li>
<li>Step 2 :</li>
<li>Step 3 :</li>
<li>Step 4 :</li>
<li>Step 5 :</li>
<li>Step 6 :</li>
<li>Step 7 :</li>
</ul></p>
</div>
<hr>
<div class="panel-footer" align="center">Copyright 2016</div>
</div>
</div>
</body>
</html>

无法转到导航栏中的菜单页面

0 个答案: