Question

在这里，我有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>

Answer 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中修改它。

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

1 个答案: