Bootstrap 4:从选项卡内部打开选项卡(第二个链接)
Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发人员快速构建响应式网站和应用程序。Bootstrap 4是Bootstrap框架的最新版本，它引入了许多新特性和改进。
在Bootstrap 4中，可以使用选项卡（Tabs）组件来创建具有多个选项卡的界面。默认情况下，选项卡之间是相互独立的，点击一个选项卡不会影响其他选项卡的状态。然而，有时候我们希望在一个选项卡内部点击某个元素时，打开另一个选项卡。
要实现从选项卡内部打开另一个选项卡，可以使用Bootstrap提供的JavaScript API。具体步骤如下：
- 首先，在HTML中创建选项卡组件的结构。例如，使用
<ul>和<div>元素创建选项卡的导航和内容区域。
<ul class="nav nav-tabs" id="myTabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tab1">选项卡1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tab2">选项卡2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="tab1">
<h3>选项卡1的内容</h3>
<button class="btn btn-primary" onclick="openTab2()">打开选项卡2</button>
</div>
<div class="tab-pane fade" id="tab2">
<h3>选项卡2的内容</h3>
</div>
</div>- 接下来，编写JavaScript函数
openTab2()来处理点击打开选项卡2的事件。在该函数中，使用Bootstrap的tab()方法来激活选项卡2。
function openTab2() {
$('#myTabs a[href="#tab2"]').tab('show');
}- 最后，在页面加载完成时，初始化选项卡组件。
$(document).ready(function() {
$('#myTabs a').click(function(e) {
e.preventDefault();
$(this).tab('show');
});
});以上代码中，$(document).ready()函数用于在页面加载完成后执行初始化操作。$('#myTabs a').click()函数用于处理选项卡导航的点击事件，阻止默认行为并激活相应的选项卡。
这样，当点击选项卡1内部的按钮时，将会打开选项卡2。
关于Bootstrap 4选项卡的更多信息和用法，可以参考腾讯云的相关文档和示例：
相关·内容
我在用引导选项卡。问题是，当其他选项卡内容也出现时，tab1内容总是会出现。你知道问题在哪里吗？您知道为什么tab1内容总是出现在其他选项卡内容中，而不是只显示正确的选项卡内容吗？
示例：
HTML：
<ul class="nav nav-pills" role="tablist">
<li class="">
<a class="nav-link active" href="#tab1" data-toggle="tab" role="tab
浏览 0提问于2018-05-13得票数 0
回答已采纳
1回答
我有基于Bootstrap 4模板的标签，但最近我遇到了这个问题:我需要在底部制作平滑的角落，下面的布局截图中有更多细节。 可用的内容： ? 应该做什么(我用红色圈出)： ? 我的代码： <ul class="nav nav-tabs">
<li class="nav-item">
<a class="home1 nav-link active" data-toggle="tab" href="#description">Tab1</a
浏览 20提问于2020-10-19得票数 0
回答已采纳
2回答
我在css的<a>元素中遇到了一个问题，这个页面使用的是Bootstrap Tab组件。所有选项卡都与其对应的链接连接。默认情况下，页面的css具有<a>元素的一些基本样式，即
a {
color: black;
}
a:hover {
color: red;
}
在Tab上有ul元素，它有一些链接。我更改了ul元素中链接的颜色。但是为什么链接的hover颜色没有改变到它的基本hover颜色呢？我只更改normal颜色，不更改hover状态颜色，为什么会发生这种情况？
<!DOCTYPE html>
<html lang="
浏览 0提问于2018-07-09得票数 0
回答已采纳
我已经用这段代码解释了我的查询。在这里，当我单击下拉导航栏页面时，应该重定向到另一个页面上可用的选项卡。
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
浏览 3提问于2017-11-02得票数 3
回答已采纳
1回答
我使用引导带4作为我的网页，我面临的问题与导航标签。
我需要打开一个忘记密码标签从登录标签内容页通过超链接那里。
下面的代码在引导程序3中为我工作，但在引导程序4中不起作用
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item"><a class="nav-link active" href="#log-in" data-toggle="tab">Log in</a></
浏览 1提问于2018-01-30得票数 12
回答已采纳
我正在运行Bootstrap 3，在“类别”页面上的navbar中有指向引导选项卡的链接，如下所示：
<li><a href="/category/#tab1">Tab1</a></li>
<li><a href="/category/#tab2">Tab2</a></li>
在我的“类别”页面上，下面是我的选项卡的代码：
<ul class="nav nav-tabs" id="myTabs">
<li cl
浏览 4提问于2017-04-05得票数 0
回答已采纳
当我使用导航选项卡在面板之间切换时，它工作得很好，但是当我尝试使用下拉菜单中的链接切换它时，它不会改变活动的选项卡。我的导航标签和下拉菜单的HTML如下，以及一个代码片段，如果有人可以看到它和帮助。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.c
浏览 0提问于2018-07-17得票数 0
回答已采纳
如何仅在切换选项卡后加载内容
开始时只加载TAB1，然后只在单击TAB2或TAB3 之后加载内容，但不要在启动加载内容
示例：
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">Default Tab</h4>
浏览 3提问于2021-11-29得票数 2
1回答
我的项目有10个选项卡，每个选项卡都将使用PHP从API中获取一些值。
每次加载页面需要10-15秒(因为它更新了所有10个选项卡的值)。
如何仅在切换选项卡后加载内容
在start加载TAB1，然后只在单击TAB2或TAB3 之后加载内容，但不要在start加载内容
示例：
<div class="col-md-6">
<div class="card">
<div class="card-body">
<h4 class="card-title">D
浏览 2提问于2021-11-30得票数 0
回答已采纳
如何定位页面并激活特定选项卡 这是我的php header('location: home.php?id=tab2'); 和我的html : tab <ul class="nav nav-tabs" role="tablist" id="navtabs">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" hr
浏览 16提问于2019-01-06得票数 0
在显示一个(引导)选项卡后，我试图将焦点放在字段上，但它不起作用：
$.fn.checkError = function(elem) {
...
$('#myTab a[href="#tab2"]').tab('show');
$('#firstname').focus();
};
该领域没有突出显示，似乎没有得到关注。
有人能帮我吗？
编辑: html代码：
<ul class="nav nav-tabs" id="myTab" role="tabli
浏览 1提问于2021-02-12得票数 0
回答已采纳
我正在使用bootstrap文档中的示例代码。
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href
浏览 0提问于2013-04-30得票数 0
回答已采纳
我正在创建一个引导/角度应用程序，并使用$routeProvider呈现视图，并希望在其中一个视图中有选项卡。但是，active选项卡Bootstrap功能并没有切换。下面是我的index.html、app.routes.js和main.html的样子：
Index.html
<!doctype html>
<head>...</head>
<body ng-app="app">
<nav>...</nav>
<div ng-view=""></div>
...
浏览 5提问于2015-11-18得票数 0
回答已采纳
3回答
如何删除活动选项卡上的下划线？这是代码：，我尝试过对..nav This . avail进行样式设计，但没有效果。试图让它看起来像真正的文件夹标签。谢谢你。
<div class="container"
<div class="row row-content">
<div class="col-12">
<h2>Charts</h2>
<ul class="nav nav-tabs"&
浏览 2提问于2020-07-27得票数 0
回答已采纳
1回答
我试过了，但我不明白为什么它不能与bootstrap 4一起工作。标签出现了，但不可能看到内容。
谢谢
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="nav-item">
<?php echo '<a href="' . substr(OSCOM::link( '/suppliers.php', osc_get_all_get_params(),
浏览 0提问于2016-07-22得票数 0
1回答
我有一些使用引导4的选项卡。在带有id“mytab”的选项卡中，我有另外两个选项卡。在“#mytab”中的选项卡中，这是一个问题。如果在" tab1“链接中单击，它将显示tab1的内容，但如果单击"tab2”链接，则仍然会显示"tab1“的内容。
你知道问题在哪里吗？
摆弄问题：
HTML：
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="r
浏览 0提问于2018-06-14得票数 1
回答已采纳
我创建了带有嵌套子选项卡的选项卡。我希望能够从父导航菜单下拉菜单导航到子选项卡。我不知道该怎么做，我试过的也不起作用。
<div class="container">
<h2>Nest tabs with submenus</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></l
浏览 0提问于2017-06-30得票数 0
回答已采纳
我有一个标签栏如下-
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selec
浏览 3提问于2020-09-20得票数 2
回答已采纳
我有一个JSP页面，它使用bootstraps data-toggle="tab“功能。在页面加载时，我激活了一个选项卡。
<ul class="nav st-nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li>
<li><a href="#tab2" data-toggle="tab"&
浏览 0提问于2014-07-23得票数 11
回答已采纳
1回答
我需要更改我的悬停和活动选项卡的背景颜色。 我的HTML代码 <div class="tabs">
<ul class="nav nav-tabs" role="tablist">
<li><a data-toggle="tab" role="tab" href="#Tab1" name="t1">Tab1</a></li>
<li><a data-tog
浏览 16提问于2019-06-06得票数 2
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
