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

Question

I'm trying to create Page with a 2 tabs when the first Tab is the Form itself and the second is a preview of it. 当第一个选项卡是Form本身，第二个选项卡是预览时，我试图用2个选项卡创建Page。

For now I only have the main page organized but it shows the both tabs content in the same time. 目前，我只组织了主页，但同时显示了两个选项卡的内容。

What I should add to fix it and what should be added on the Form.php and preview.php to fix it. 我应该添加什么来解决它，以及应该在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 what u did is working but when I put some PHP tags to the pages it's not working again.. :( here's all the code (form and previews isn't ready yet) Ben，您所做的工作正常，但是当我在页面上放置一些PHP标记后，它又无法正常工作了.. :(这里是所有代码（表单和预览尚未准备好）

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

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

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

问题描述

2 个解决方案

解决方案1
0 2015-01-20 14:37:44

解决方案2
-1 已采纳 2015-01-20 12:50:18

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

问题描述

2 个解决方案

解决方案1 0 2015-01-20 14:37:44

解决方案2 -1 已采纳 2015-01-20 12:50:18

解决方案1
0 2015-01-20 14:37:44

解决方案2
-1 已采纳 2015-01-20 12:50:18