javascript — вкладка начальной загрузки, показывающая обе вкладки одновременно

Question

javascript — вкладка начальной загрузки, показывающая обе вкладки одновременно

Я пытаюсь создать страницу с двумя вкладками, когда первая вкладка — это сама форма, а вторая — ее предварительный просмотр.

Пока у меня организована только главная страница, но она показывает содержимое обеих вкладок одновременно.

Что я должен добавить, чтобы это исправить, и что нужно добавить в 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>

0

html javascript php tabs twitter-bootstrap

Решение

По вопросам рекламы [email protected]

Accepted Answer

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

-1

Другие решения

Бен то, что вы сделали, работает, но когда я помещаю некоторые 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>

0

Источник