Bootstrap：使用其他页面中的按钮转到特定选项卡答案

【问题标题】：Bootstrap :Go to specific tab using a button in other pageBootstrap：使用其他页面中的按钮转到特定选项卡
【发布时间】：2015-03-12 11:35:19
【问题描述】：

在这里，我有 2 个 HTML 页面（a.html，b.html），我在 a.html 中使用 Bootstrap Tab 来显示不同的信息。

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>

现在我有另一个页面（b.html），在（b.html）中，它有一个按钮，我想要如果我点击按钮，我可以回到a.html并显示特定的标签（ejb）在下拉列表（Java）中。我该怎么做？

我尝试了默认（灰色）按钮，但它不起作用。

如果需要将页面更改为 php 以显示特定选项卡，我可以更改它。

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>

【问题讨论】：

回到a.html时，需要打开下拉菜单（#ejb）吗？
@Jean Gkol 是的，当我单击 b.html 中的按钮时，我想在 a.html 中显示特定的选项卡（ejb）
不幸的是，我只能在 php 脚本中做到这一点，而不是完整的 html .. 即使在 javascript 中
@Jean Gkol php 没问题。我可以改成php。

标签： javascript html twitter-bootstrap-3

【解决方案1】：

这是您需要尝试的步骤：

我。在 a.php 的 URL 末尾添加新参数（我的意思是，在 b.php 中要单击的按钮中）这是一个信号，让 a.php 看看它是否是要处理的特定 URL。

例如：

http://www.myweb.com/a.php?q=ejb

因此，在 b.php 中，整个代码将是：

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

以下内容适用于 a.php 脚本：

<?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>";
  }
?>

注意：从两（2）中可以看出，您只需要添加in active您需要打开或访问哪个标签即可。

所以，a.php 的整个代码将是这样的：

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

抱歉，回答太长了。这是我能说的，因为我的英语口语不够好。真的希望这对您有用，并为您在 javascript 中修改它提供灵感。

【讨论】：

对不起，代码不工作，tab(ejb)不能显示出来。而且所有的Bootstrap选项卡都不能显示出来。
真的吗？好吧， :D 我发现这里真的很管用。你想让我在我的网页上显示它吗？然后我需要 5 分钟再做一次：D
我看到有一个
标签来避免它显示...对不起..我会再次编辑它
对不起，我重定向它，因为它里面没有索引：p 那么试试这个：appacyber.net/appalab/test/b.php
在 Firefox 中，如果我点击 b.php 中的按钮，a.php 仍然显示主页选项卡。为什么？