Bootstrap 4.5选项卡在Blazor中始终打开页面，而不是选项卡内容
在Blazor中，使用Bootstrap 4.5的选项卡时，如果希望始终打开页面而不是选项卡内容，可以通过以下步骤实现：
- 首先，确保已经引入了Bootstrap 4.5的CSS和JavaScript文件。可以在Blazor的主页或布局文件中使用以下代码引入：
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>- 在Blazor页面中，创建一个容器元素，用于包含选项卡和页面内容。例如，可以使用
<div>元素：
<div class="container">
<!-- 选项卡和页面内容 -->
</div>- 在容器元素中，使用Bootstrap的选项卡组件创建选项卡。可以使用
<ul>元素和<li>元素来定义选项卡，使用<div>元素来定义选项卡内容。示例代码如下：
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#page1">页面1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page2">页面2</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#page3">页面3</a>
</li>
</ul>
<div class="tab-content">
<div id="page1" class="tab-pane fade show active">
<!-- 页面1的内容 -->
</div>
<div id="page2" class="tab-pane fade">
<!-- 页面2的内容 -->
</div>
<div id="page3" class="tab-pane fade">
<!-- 页面3的内容 -->
</div>
</div>- 最后，可以根据需要在各个选项卡内容的部分中填充具体内容，例如表单、图表、文本等。
对于这个问题中的需求，以上的代码可以满足在Blazor中使用Bootstrap 4.5的选项卡，并始终打开页面而不是选项卡内容。
腾讯云相关产品中，可以使用云服务器（CVM）来部署和运行Blazor应用程序。云数据库（CDB）可用于存储应用程序所需的数据。腾讯云函数（SCF）可用于处理后端逻辑。此外，腾讯云提供了丰富的安全产品，例如DDoS防护、Web应用防火墙等，以保护您的应用程序和数据的安全。
关于Blazor和Bootstrap的更多信息，您可以参考腾讯云的官方文档：
相关·内容
我是Blazor的新手，刚刚使用WASM，Bootstrap4.5和.NET 5做了一个新项目。我试图让选项卡布局工作，但每当我点击我的选项卡，他们试图导航到新的页面，而不是打开相关的选项卡内容。我不太确定我在这里做错了什么，因为查看示例页面会发现我在做示例正在做的事情(尽管我现在可能只是对自己的代码视而不见)。下面是从我的GameDetails.razor页面生
浏览 15提问于2021-08-05得票数 0
2回答
我正在尝试创建可选项卡，其中选项卡垂直堆叠在页面的左侧，页面右侧的内容随选项卡的变化而变化。<div class="tab-pane fade" id="booksTab"> </div></div>
发生的情况是，选项卡显示出来，但所有内容都
浏览 0提问于2013-06-30得票数 2
回答已采纳
php 'items' => [ 'label' => 'Administrators>
选项卡显示正确。但active对其他选项卡不起作用。只有活动显示在第一个选项卡上。如果我们点击其他选项卡(“member Tracker”，“Pages”)，它会正确路由，并可以查看页面内容。但
浏览 23提问于2018-08-08得票数 0
回答已采纳
我正在使用DataTables和Bootstrap，并得到了所有的工作。然后我需要一个标签中的表格，当我这样做的时候，表格标题开始变窄，正好适合标题文本的宽度。如果该选项卡在页面显示时处于活动状态，则该表看起来很棒。您可以看到我所指的。选项卡1看起来没问题。选项卡2的页眉较窄。
如果我启用排序并单击制表符2上的列，页眉将扩展到适当的宽度，但始终以窄开头。
浏览 4提问于2012-07-13得票数 5
回答已采纳
我尝试在Twitter Bootstrap中遍历页面上的每个选项卡，并在单击按钮时打印该选项卡的内容。换句话说，如果有5个制表符，它会遍历所有制表符，并将每一页发送到打印机。这些选项卡在页面加载时动态创建。我不是特别擅长质疑(可能很明显)--有人能给我一些建议吗？我没有看到任何类似的代码可以开始。
浏览 1提问于2012-11-14得票数 1
回答已采纳
创建了一系列选项卡布局小工具。 如何更改选项卡在页面上从左到右的显示顺序？即。我希望选项卡显示为A、B、C，但我按A、C、B的顺序添加了它们？ 是重新制作选项卡的唯一解决方案吗？我想这是一个常见的问题，因为随着项目的发展，将会添加新的内容。 (为了避免混淆，我知道可以在页面打开时更改哪个选项卡是“选中”的-我不是在说这个。)
浏览 25提问于2019-04-09得票数 0
我试图让选项卡在IE8中工作，直接使用Twitter Bootstrap的示例页面上的代码，但它们的行为方式与示例页面上的不同。<head>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css&quo
浏览 0提问于2013-07-11得票数 1
1回答
在用户编辑页面中添加菜单选项卡
、、、、
我的主题是bootstrap 3，我有几个用户角色。其他普通用户角色使用引导主题，但一个用户角色(不是管理员)使用七个主题，因为我提供了添加新内容的访问权限。我试图找到方法，我可以添加选项卡在用户配置文件编辑页面。并将这些选项卡仅添加一个用户角色。我指的是这个页面：那么如何才能添加更多的标签和链接到自定义<e
浏览 0提问于2016-01-17得票数 0
带页面的选项卡在屏幕上处于活动状态。我有一些服务器-客户端数据流，我想优化它。我希望只有当用户在观看页面时才有数据流动，而不是当页面在浏览器中打开时，而是隐藏在非活动选项卡中。有人知道吗？谢谢。
浏览 4提问于2013-12-16得票数 1
回答已采纳
我在选项卡中有一个CRM子网格，并且在我的代码(JS)中，如果该子网格不包含数据，我将使用Xrm.Page.ui.tabs.get("XXX").setDisplayState("collapsed")当我打开选项卡时，它里面的子网格只有一个空行(而不是填充选项卡区域，尽管网格被设置为填充选项卡)，并且没有页脚。此外，当向子网格添加记录时，我只能看到第一条记录(因为它在第一行)，为了看到其余的记录，我必须刷新表单
浏览 0提问于2016-12-12得票数 0
我有一个WordPress站点，在头部，我有这个CDN：它允许菜单中的引导选项卡在悬停时触发。我也有一个单独的页面，其中我使用了不在我的菜单中的选项卡，我
浏览 3提问于2016-02-27得票数 0
我使用选项卡在我的所有文件中缩进。然而，一些较大的项目仍然使用空间，所以我也需要遵循这些指导方针时，我的贡献。我如何告诉vim始终只使用文件所使用的内容(如果文件没有使用任何内容，则使用选项卡)？我尝试在~/.vimrc中添加以下行(据我理解，这应该是强制选项卡--不是我想要的，而是比到处插入空格更好)，然后重新打开我正在编辑的文件，但这没有生效。
我正在运行vim-8.0.0386。
浏览 4提问于2017-04-17得票数 3
回答已采纳
1回答
chrome.browserAction.onClicked.addListener(function(tab) { "file": "enterIonis.js"});
此脚本从打开的选项卡中获取一些信息，然后更改选项卡url以加载新页。然后，该脚本需要等待新页面完全加载才能与其交互。为此，它打开一个端口并向使用chrome.tabs.onUpda
浏览 2提问于2016-12-17得票数 1
1回答
我在尝试让选项卡在twitter bootstrap中工作时遇到了一些困难，并且对文档试图说明的内容感到有点困惑。我有一个包含三个选项卡的小页面。我显示了第一个选项卡，但似乎无法在其他两个选项卡之间切换。根据，我需要激活每个选项卡，我已经用其中一个选项卡激活了每个选项卡
$('#tabBar a[href="#Sewer"]').tab('show
浏览 13提问于2013-01-22得票数 0
回答已采纳
我在一个intranet站点上工作，在生产环境和开发环境中，当我用鼠标中键单击一个链接以在新选项卡中打开时，该选项卡在IE8中以quirks模式呈现。Chrome可以正常打开，如果我没有在标签页中打开链接，它会在正常模式下打开。
我做了一些测试，我快速打开同一页的多个选项卡，页面有时会打开得很好。我找不到任何原因，我唯一想到的可能是当页面
浏览 0提问于2011-01-28得票数 2
回答已采纳
1回答
我不太了解Javascript，我正在使用从互联网上下载的一些示例javascript选项卡代码。我有一个带有许多标签(年份)的页面(旅行)。每个选项卡在同一页中打开不同的内容(指向图片库的链接)。单击时，每个库都会在新页面中打开。在这个新页面上，我想链接回Travel页面，并显示特定选项卡的内容(用户查看的年份)。，如果我选择第二个选项卡(&q
浏览 12提问于2021-01-03得票数 0
我有一个工作空间，大约有9或10个选项卡，其中有我一直使用的文件。但是，如果我想通过双击Finder打开与VSC相关的新文件，而不是将它作为新选项卡在当前实例中打开，它将关闭实例(与所有其他10个文件一起)并单独打开。我找不到任何将此行为更改为其他编辑器的设置，它基本上是在一个新的选项卡中从操作系统的Finder中打开一个文件，同时保持打开我的所有其他内容
浏览 1提问于2018-04-09得票数 9
回答已采纳
我在C#中使用Selenium在Chrome中运行一个任务。first/main选项卡在整个任务过程中始终保持打开状态。然后，我打开一个新的选项卡。做点什么。然后关闭该选项卡。我尝试了几种方法，打开一个新的标签，包括SendKeys和其他在这里找到的“解决方案”，但是将下面的JavaScript注入webdriver是唯一对我有效的方法。;d.body.appendChild(a);return a;
问题是，每次我
浏览 22提问于2019-08-07得票数 0
回答已采纳
2回答
我想问，如何处理页面上的许多元素，这些元素都是这样排列的： ... hundreds of <div>'s<div id="tab2">
...问题是，有更多的选项卡，每个选项卡在DOM中保存了大量的元素，这使得所有操作越来越慢，因为更多的选项卡装载了内容。是否有一种简单的方法，可以暂时从不可见选项卡中删除元
浏览 2提问于2014-04-28得票数 0
回答已采纳
嗨，我有一个表单，让我们说，它使用jquery验证和成功的验证，我希望它提交表单到upsales.com (一个客户关系管理系统)我使用(但我不能控制的代码在upsales.com上)，也打开一个新的选项卡中的链接propertyDetailForm').submit();}); 但目前它只是提交表单，而不是模仿点击
浏览 0提问于2016-02-26得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
腾讯会议
云直播
对象存储活动推荐
腾讯云开发者
