当第一个选项卡是表单本身，第二个选项卡是它的预览时，我正在尝试创建具有 2 个选项卡的页面。
目前，我只组织了主页，但它同时显示两个选项卡的内容。
我应该添加什么来修复它，应该在表单上添加什么.php和预览.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>
Ben 你所做的是有效的，但是当我在页面上放置一些 PHP 标签时，它又不起作用了。 :(这是所有代码（表单和预览尚未准备就绪）
索引.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>
形式.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>
预览.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>
$(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>