Bootstrap :Go to specific tab using a button in other page
Question
In here,i have 2 HTML page(a.html,b.html), I use Bootstrap Tab in a.html to show different information.
a.html
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle"
data-toggle="dropdown">Java <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>abc</p>
</div>
<div class="tab-pane fade" id="ios">
<p>123</p>
</div>
<div class="tab-pane fade" id="jmeter">
<p>456</p>
</div>
<div class="tab-pane fade" id="ejb">
<p>789</p>
</div>
</div>
</body>
</html>
Now I have another page(b.html),in (b.html),it has a button,I want if i click the button, I can back to a.html and show out the specific tab(ejb) in dropdown list(Java).How can I do it?
I try Default (Gray) Button,but it is not work.
If need to change the page to php to show out the specific tab, i can change it.
b.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="a.html">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</body>
</html>
1 answers
solution1
1 2015-03-12 02:47:29
This is the step you need to try:
I. Add new parameter in the end of the a.php's URL (I mean, in button to be clicked in b.php) This is used to be a signal for a.php to see if it is spesific URL to handle.
For example:
http://www.myweb.com/a.php ?q=ejb
So, in b.php, the whole codes will be:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0
/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h2>button</h2>
<a class="btn" type="button" href="http://www.myweb.com/a.php?q=ejb">Default (Gray) Button</a>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0
/js/bootstrap.min.js"></script>
</body>
</html>
- This follows is for a.php scripting:
<?php $url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; if ($url=="http://www.myweb.com/a.php?q=ejb"){ //this is the point. print "<div id='myTabContent' class='tab-content'> <div class='tab-pane fade' id='home'> <p>abc</p> </div> <div class='tab-pane fade' id='ios'> <p>123</p> </div> <div class='tab-pane fade' id='jmeter'> <p>456</p> </div> <div class='tab-pane fade in active' id='ejb'> <p>789</p> </div> </div>"; } else{ print "<div id='myTabContent' class='tab-content'> <div class='tab-pane fade in active' id='home'> <p>abc</p> </div> <div class='tab-pane fade' id='ios'> <p>123</p> </div> <div class='tab-pane fade' id='jmeter'> <p>456</p> </div> <div class='tab-pane fade' id='ejb'> <p>789</p> </div> </div>"; } ?>
Note : From the two (2) you can see that you just need to add in active which tab you need to open or to visit back.
So, the whole codes for a.php will be like this:
<!DOCTYPE html>
<html>
<head>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="myTab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">
Home</a>
</li>
<li><a href="#ios" data-toggle="tab">iOS</a></li>
<li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#jmeter" tabindex="-1" data-toggle="tab">
jmeter</a>
</li>
<li><a href="#ejb" tabindex="-1" id="test_open_menu" data-toggle="tab">
ejb</a>
</li>
</ul>
</li>
</ul>
<?php
$url="http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if ($url=="http://localhost/test/a.php?q=ejb"){
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade in active' id='ejb'>
<p>789</p>
</div>
</div>";
}
else{
print "<div id='myTabContent' class='tab-content'>
<div class='tab-pane fade in active' id='home'>
<p>abc</p>
</div>
<div class='tab-pane fade' id='ios'>
<p>123</p>
</div>
<div class='tab-pane fade' id='jmeter'>
<p>456</p>
</div>
<div class='tab-pane fade' id='ejb'>
<p>789</p>
</div>
</div>";
}
?>
</body>
</html>
Sorry for long answer. This is what I can say since I have no good enough in English spoken. Really hopes this work for you and be inspired for you to modify it in javascript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.