javascript - Bootstrap :Go to specific tab using a button in other page-6ren

javascript - Bootstrap :Go to specific tab using a button in other page

转载作者：行者123 更新时间：2023-12-03 10:35:51

在这里，我有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.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 对其进行修改。

关于javascript - Bootstrap :Go to specific tab using a button in other page，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28993637/

文章推荐： c# - WPF 命令如何获取所有必要的信息以添加到正确的列表项

文章推荐： c# - 动画后执行命令

文章推荐： javascript - 同位素排序不起作用

php - 这个语法是什么 ( page = $page ？ $page : 'default' ) in PHP mean?
我是 PHP 新手。我在 WordPress 中遇到了这种语法.该代码的最后一行是做什么的？ $page = $_SERVER['REQUEST_URI']; $page = str_replace(
WordPress 管理员 : show draft pages in page attributes parent page dropdown
为了清楚起见 - 这是我在这个问题中谈论的盒子的图片: 背景:我为客户构建了一个相对复杂的 WP 网站，它更像是一个 CMS 而不是博客，并且依赖于正在构建的页面层次结构。 (嗯，它们实际上是设置了
github-pages - GitHub Pages 是否允许使用 master 或 gh-pages 以外的分支？
GitHub Help显示了 GitHub Pages 的以下选项: gh-pages 分行主分支 master 分支/docs 文件夹那么我们可以使用名称不是 master 或 gh-pages
javascript - Angularjs登录认证: Prevent user navigate to other page except login page and registration page
我正在使用 AngularJS 框架为我的前端开发一个 Web 应用程序。对于我的登录页面，我必须阻止用户浏览除登录页面和注册之外的其他页面。但是我现在所做的代码也阻止用户导航到注册页面。以下是我的代
zend-framework - Zend_Paginator : no page number on links on a page with no page number specified by the URL
如果不将/1 粘贴到 url 上，是否可以改变 Zend_Paginator 来处理 URL？当前用户转到/aaron/studio。然后用户应该点击页面并开始访问 URL，例如:/aaron/stu
php - FPDF/PHP : Footer page is display at the bottom of the next page (Blank page)
目前，我创建了一个可以生成PDF的系统。 PDF 中的数据来自 MySQL 数据库。现在，我像这样显示数据第一页:仅显示一条数据。第二页文字:将显示数据(每页最多 3 个数据) 说得更清楚一点，比
c# - URL 路由需要/Home/Page?page=1 而不是/Home/Page/1
我正在尝试构建我的 ASP.NET MVC 4.5 项目以使用搜索引擎友好的 URL。我正在使用以下路由映射。 routes.MapRoute( name: "Default", ur
c# - Crystal 报表出现 "Page Header plus Page Footer is too large for the page"错误的原因是什么？
我为打印按钮使用了以下代码: Data.str = null; //Data.str = textBox24.Text.ToString(); string s = "select * from te
javascript - jQuery 手机 : Multi-Page Application with Separate Pages: Second Page not Getting Styled
我们有一个带有两个 View 的单页应用程序(本质上是一个项目列表和所选项目的详细信息页面)。两个 View 都在单独的 html 文件中，我们使用 sammy.js 在页面之间进行转换/导航。在我们
android - 查看页面 : If page get removed the next pages content gets the removed pages content
(如果有人需要更多信息或更好的描述，请告诉我) 您好，我从这里添加了 viewPagerLibrary:http://viewpagerindicator.com/#introduction今天在我的
razor - 在 Razor 项目中，Content Page、Empty Page 和 Web Page Razor 之间有什么区别
我是网页的新手，刚刚开始学习它。在创建新的 Razor 网站后，当我点击添加新项目时，我会看到可以添加的项目的多个选项。它们是: Layout Page(Razor) 这些类似于Master Page
ruby-on-rails - 将 ID 传递给静态路由——匹配 page.url => "pages#show", :id => page. id——不起作用
我正在尝试使用 activeadmin 和 awesome_nested_set 创建页面模型。我一直在试图弄清楚如何使用正确的尾随 slug(例如/page1/page1subpage/a-subp
asp.net-mvc - Razor - 如何从 this.Page(动态 WebPageBase.Page)转换为 System.Web.UI.Page
我正在尝试将 DotNetOpenAuth 与 Razor/MVC3 一起使用。大多数 DotNetOpenAuth HTML 助手都接受 System.Web.UI.Page 作为参数之一，使用 W
javascript - jQuery 手机 : the styles for the next page are applied to the current page while making a server connection during page navigation
在我们的应用程序中，当我们在某些页面之间导航时，我们会在进入下一页之前发出服务器请求。发生这种情况时，当前页面上会显示加载图形。奇怪的是，在等待服务器响应完成时，下一页的样式会应用到当前页面。这会导致
razor-pages - ASP.NET Core 3.1 Razor 页面 : How to automatically redirect to Login page from Index page?
我正在使用 ASP.NET Core 3.1 MVC 和 Razor 页面构建 Web 应用程序。我是 Razor 页面的新手。我使用上面的方法创建了一个基本应用程序。我想在应用程序启动时加载登录
templates - umbraco模板错误: "Content controls have to be top-level controls in a content page or a nested master page that references a master page."
我遇到了一个我似乎无法解释的问题。我在 Umbraco 中设置了一个主模板和 2 个子模板，但出现以下错误: Content controls have to be top-level control
javascript - 用户输入的 If 语句放置(带有 code.gs、page.html、page-css.html、page-js.html 的谷歌应用程序脚本)
我正在创建一个网络应用程序，允许用户选择他们当前的部门、他们将临时借调到哪个部门、他们正在执行的任务以及在任务上花费的时间。我需要写一些声明，根据他们当前部门的选择来确定他们所在的团队(当前的或新的)
Gatsby error, I am getting the 404 page with error saying that there is no page at this URL until I refresh the page again(Gatsby错误，我正在获取404页面，错误是说在我再次刷新页面之前，此URL上没有页面)
当我导航到一个页面时，我得到了404错误页面，该页面说，在我刷新浏览器之前，没有包含此URL的页面，然后该页面才会显示。。我尝试使用@REACH/ROUTER来导航，而不是使用REACT-ROUTER
php - html2pdf: 生成一个空白页
我正在使用 Html2Pdf 将一些 HTML 文件转换为 PDF。我还需要添加分页符来划分文档的各个部分。为此，我使用标签。我有以下 HTML 片段: ...
github-pages - 使用GitHub Pages，可以在不使用Jekyll时指定根Web目录吗？
我正在使用另一个静态网站生成器，我希望能够将源文件(以markdown格式)以及生成的网站 checkin 到我的username.github.com存储库中。因此，很像Jekyll，但我没有使用J

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Bootstrap :Go to specific tab using a button in other page