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

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>

Answer 2

＆＃13;

$(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");
  });
});

＆＃13;

.tab-pane{
  display: none;
}

.active
{
  display: block !important;
}

＆＃13;

<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>

＆＃13;

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

2 个答案: