Bootstrap 导航选项卡同时显示两个选项卡

Question

我正在尝试创建包含 2 个选项卡的页面，第一个选项卡是表单本身，第二个是表单的预览。

现在我只组织了主页，但它同时显示了两个选项卡的内容。

我应该添加什么来修复它以及应该在 Form.php 和 preview.php 上添加什么来修复它。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FORM</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){ 
$("#myTab a").click(function(e){
    e.preventDefault();
    $(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#add">ADD CAMPAIGN</a></li>
    <li><a href="#preview">PREVIEW</a></li>

</ul>
<div class="tab-content">
    <div id="add" class="tab-pane active">
        <?php include('form.php');?>
    </div>
    <div id="preview" class="tab-pane">
        <?php include('preview.php');?>
    </div>

    </div>
</div>
</body>
</html>

Answer 1

$(document).ready(function(){ 
  $("#linkOne").click(function(e){
      e.preventDefault();
      $("#preview").removeClass("active");
      $("#add").addClass("active");
  });
  $("#linkTwo").click(function(e){
      e.preventDefault();
      $("#add").removeClass("active");
      $("#preview").addClass("active");
  });
});

.tab-pane{
  display: none;
}

.active
{
  display: block !important;
}

<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
    <li><a id="linkOne" href="#add">ADD CAMPAIGN</a></li>
    <li><a id="linkTwo" href="#preview">PREVIEW</a></li>

</ul>
<div class="tab-content">
    <div id="add" class="tab-pane active">
        tab content 1
    </div>
    <div id="preview" class="tab-pane">
        tab content 2
    </div>

    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Answer 2

Ben 你所做的工作正常，但是当我将一些 PHP 标签添加到页面时，它不再工作了。:( 这是所有代码（表单和预览尚未准备好）

index.php

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Collapse content</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
  <script>
 $(document).ready(function(){ 
  $("#linkOne").click(function(e){
      e.preventDefault();
      $("#preview").removeClass("active");
      $("#add").addClass("active");
  });
  $("#linkTwo").click(function(e){
      e.preventDefault();
      $("#add").removeClass("active");
      $("#preview").addClass("active");
  });
});
  </script>

</head>
<body>

<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
    <li><a id="linkOne" href="#add">ADD CAMPAIGN</a></li>
    <li><a id="linkTwo" href="#preview">PREVIEW</a></li>

</ul>
<div class="tab-content">
    <div id="add" class="tab-pane active">
        tab content 1

        <?php include('form.php');?>
    </div>
    <div id="preview" class="tab-pane">
        tab content 2
         <?php include('preview.php');?>
    </div>

    </div>
</div>



</body>
</html>

form.php

<form method="post"  action="form.php">
                        <table>
                            <tr>
                                <th> 
                                    <label for="name">Name</label>
                                </th>
                                <td>
                                    <input type = "text" name="name" id="name">
                                </td>

                            </tr>
                            <tr>
                                <th> 
                                    <label for="email">E-mail</label>
                                </th>
                                <td>
                                    <input type = "text" name="email" id="email">
                                </td>

                            </tr>
                            <tr>
                                <th> 
                                    <label for="message">Message</label>
                                </th>
                                <td>
                                    <textarea type = "text" name="message" id="message"></textarea>
                                </td>

                            </tr>
                        <table>
                            <input type="submit" value="Send">
 </form>

preview.php

<table>
                            <tr>
                                <th> 
                                    <label for="name">Name</label>
                                </th>
                                <td>
                                <label for="name">Name</label>
                                </td>

                            </tr>
                            <tr>
                                <th> 
                                    <label for="email">E-mail</label>
                                </th>
                                <td>
                                    <label for="name">Name</label>
                                </td>

                            </tr>
                            <tr>
                                <th> 
                                    <label for="message">Message</label>
                                </th>
                                <td>
                                    <label for="name">Name</label>
                                </td>

                            </tr>
<table>

Bootstrap 导航选项卡同时显示两个选项卡

Bootstrap navigation tab showing the both tabs in the same time

html

javascript

php

tabs

twitter-bootstrap