tabs 相关问题

尝试将一个数组中的文本输出到另一个数组中 - React JS

我正在尝试扩展选项卡数组的功能，以便能够像 Chrome 中那样有一个来回按钮，允许用户在该选项卡中浏览其历史记录。 tabArray 的示例 反对...

iPadOS 18 UiTabBarController 5+ 选项卡，没有“更多”按钮

在 iOS 18 之前，苹果允许 iPad 有 6 个选项卡，没有“更多”按钮。水平尺寸类别设置为“紧凑”会将选项卡栏恢复到底部，但只允许 5 个选项卡，没有更多的屁股...

水平可滚动选项卡集中在中心，并在颤动中对齐

这里我想问一下或者我可以做一个类似标签页，聚焦中心但左右标签页30%透明的教程吗，谢谢！

如何仅使用 xhtml 和 css 在文档末尾使用 nav 获得正确的 Tab 键顺序

出于可访问性的原因，我的 nav 元素位于文档的末尾，并使用 CSS 位于屏幕的顶部。由于文档顺序，我怀疑导航链接会...

如何去掉最后一个css垂直制表符的下边框？

如何从 CSS 选项卡菜单中删除最后 1px 边框？除了那部分之外，流程和感觉看起来很干净。 身体 { 字体系列：Helvetica、Arial、sans-serif； 字体大小：1...

iOS 18 Tab 切换闪屏

我刚刚注意到，在使用 Xcode 16 (iOS 18) 构建应用程序时，切换选项卡时屏幕会短暂闪烁（使用标准 UITabBarController）。你们有人经历过吗？我有灼烧感...

将内容选项卡容器拉伸至 100%

如何将选项卡内容容器拉伸到屏幕的 100%？ .season_tabs { 位置：相对； 最小高度：360px； 明确：两者； 边距：25px 0； } .season_tab { 佛罗里达...

单击时启动引导选项卡关闭活动

我有以下代码： 第一块 &l... 我有以下代码： <div id="action_wrap"> <div id="action_nav"> <div class="action" data-target="#content1" data-toggle="tab">First Block</div> <div class="action" data-target="#content2" data-toggle="tab">Second Block</div> <div class="action" data-target="#content3" data-toggle="tab">Third Block</div> </div> <div id="action_items"> <div class="action_text collapse" id="content1"> <p>Content 1</p> <span class="close">Close</span> <div class="clearfix"></div> </div> <div class="action_text collapse" id="content2"> <p>Content 2</p> <span class="close">Close</span> <div class="clearfix"></div> </div> <div class="action_text collapse" id="content3"> <p>Content 3</p> <span class="close">Close</span> <div class="clearfix"></div> </div> </div> </div> 并使用 Twitter Boostrap 的“Tab”脚本，它工作得很好。我为关闭按钮和导航按钮添加了一些看起来非常令人讨厌的脚本来获取活动类，如下所示： $(".action").click(function () { $(this).parent().children().removeClass("active"); $(this).addClass("active"); $(this).parent().addClass("active"); }); $(".close").click(function () { $(this).parent().parent().parent().children().removeClass("active"); $(this).parent().parent().parent().children().children().removeClass("active"); }); 虽然不多，但嗯，它正在工作。 我不能做的是通过单击活动导航 div 来关闭 Bootstrap 的选项卡。 这意味着如果我在 #content1 上单击第一个带有数据目标的 .action div，则 .action_text#content1 将获得 .active 类，我单击的 .action div 也将获得。我想要的是 .action.active data-target="#content1" 单击删除 .tab() 的类“active”并且其本身相同。 我在另一个线程中发现更改 Bootstrap 的 Tab 脚本中的代码 $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.preventDefault() $(this).tab('show') }) 但似乎每次我编辑它时，它都会破坏整个事情。我尝试像这样添加 if 语句 $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { if ($(this).hasClass('active')) { $(this).tab().removeClass('active'); $(this).removeClass('active'); } else { e.preventDefault() $(this).tab('show') } }) 但是整个事情都停止了。 首先，您应该尽量避免更改 Bootstrap 本机代码，否则您可能会失去升级到未来版本的能力。 关于您的问题，您可能会像我一样遇到一些事件并发问题... 如果您想在单击选项卡切换时关闭活动选项卡，请查看此处： http://bootply.com/61835（归功于katie，我不是这个脚本的所有者） 但是，如果您希望能够在以下情况下关闭活动选项卡（切换和窗格）： 单击活动选项卡切换 单击选项卡切换或窗格之外的任何其他位置 按 ESC 键 ...那么这个脚本可能会帮助你： $(function() { var active = $('a[data-toggle="tab"]').parents('.active').length; var tabClicked = false; // Closes current active tab (toggle and pane): var close = function() { $('a[data-toggle="tab"]').parent().removeClass('active'); $('.tab-pane.active').removeClass('active'); active = null; } // Closing active tab when clicking on toggle: $('[data-toggle=tab]').click(function(){ if ($(this).parent().hasClass('active')){ $($(this).attr("href")).toggleClass('active'); active = null; } else { tabClicked = true; active = this; } }); // Closing active tab when clicking outside tab context (toggle and pane): $(document).on('click.bs.tab.data-api', function(event) { if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) { close(); } tabClicked = false; }); // Closing active tab on ESC key release: $(document).keyup(function(e){ if(active && e.keyCode === 27) { // ESC close(); } }); }); 你可以用这个 JSFiddle 尝试一下： http://jsfiddle.net/almeidap/EAuUY/（使用 Bootstrap 3） 即使使用完全限定的网址，这实际上也会关闭选项卡。 $('[data-toggle=tab]').click(function(){ if ($(this).parent().hasClass('active')){ var url = $(this).attr('href'); var tid = url.split('#')[1]; console.log(tid); $('#'+tid).toggleClass('active'); document.location.hash = ''; } }); /// also can work with pills by switching to $('[data-toggle=pill]') 使用 jQuery 关闭 Bootstrap 5 打开的活动选项卡的方法： jQuery(document).ready(function(){ var activeTabId = false; jQuery(".nav-link[data-bs-toggle='tab']").click(function(){ var clickedTab = jQuery(this); var clickedTabId = clickedTab.attr("id"); if(activeTabId != clickedTabId){ //On new tab click activeTabId = clickedTabId; }else{ //On clicking of open tab -> Close tab clickedTab.removeClass("active").attr("aria-selected", false).attr("tabindex", ""); jQuery(clickedTab.attr("data-bs-target")).removeClass("active show"); activeTabId = false; } }); });//就绪结束

如何将光标置于空行行为上以将其放置在虚拟缩进之后？

当我在几行代码之间有一个空行并将光标放在这个空行上时，它在 Rider 中放置时没有任何缩进。在 VS 中，它位于虚拟缩进之后，与

让 TabButton 获得自己的索引

另一个问题展示了如何根据 TabButton 是否是当前索引来更改它的颜色： 颜色：tabBar.currentIndex == 1？ “紫色”：“浅蓝色” 然而，这...

Qt QML 让 TabButton 拥有自己的索引

另一个问题展示了如何根据 TabButton 是否是当前索引来更改它的颜色： 颜色：tabBar.currentIndex == 1？ “紫色”：“浅蓝色” 然而，这个

在linux中用制表符替换空格

如何在 Linux 中将给定文本文件中的空格替换为制表符？

如何使用 Console.WriteLine 对齐列中的文本？

我有一种列显示，但最后两列似乎没有正确对齐。这是我现在的代码： Console.WriteLine("客户姓名" +“出售...

如何在 Javascript 中创建具有隐藏、禁用和启用功能的选项卡

我想从头开始创建 Javascript 选项卡 选项卡链接需要响应式。 选项卡链接还应将方向或对齐方式从水平更改为垂直 选项卡应包含一个用于...

用于转到并打开特定选项卡的外部哈希 (#) 链接不适用于 Bootstrap 5（在 4 上正常）？

我的目标是使用外部哈希 (#) url 链接来打开特定的 Bootstrap 选项卡。我喜欢与 html 锚点链接相同的功能，允许在任何页面、电子邮件等任何地方使用链接......

有没有办法通过材质选项卡附加数据或ngModel？

我有一个像这样的 mat-tab-group，其中选项卡内容是根据所选选项卡决定的： 我有一个像这样的mat-tab-group，其中选项卡内容是根据所选选项卡决定的： <mat-tab-group dynamicHeight=""> <mat-tab *ngFor="let investorScheme of investorDashboardData?.investorSchemes" label='{{investorScheme.schemeName}}'> <mat-form-field class="w-50" appearance="outline"> <mat-label>As On Date</mat-label> <mat-select [(ngModel)]="selectedDate"> <mat-option *ngFor="let d of investorScheme.displayDates" [value]="d"> {{d}} </mat-option> </mat-select> </mat-form-field> <table> </table> </mat-tab> </mat-tab-group> 如您所见，我在选项卡内显示了一个 select 框，其中选项是根据所选选项卡动态设置的。 我的要求是每当选项卡更改时默认选择第一个mat-option。 我正在寻找一种方法以某种方式附加或传递所选选项卡的数据，我可以在(selectedTabChange)事件中读取这些数据，但即使经过大量搜索，我也找不到任何方法来做到这一点。 有什么办法可以将一些数据附加到ts文件中可以读取的选项卡上吗？ 如果没有，有没有办法设置选项卡更改时选择默认选择的第一个选项，并根据选项卡加载选择？ 是的，您可以使用 selectedTabChange 事件： tabChange(event: MatTabChangeEvent) { this.selectedDate = this.investorDashboardData.investorSchemes[event.index].displayDates[0]; } <mat-tab-group dynamicHeight="" (selectedTabChange)="tabChange($event)"> ... </mat-tab-group> 演示@StackBlitz

如何动态调整导航选项卡的宽度以使其填满屏幕

我有一个导航选项卡，如下所示： 我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied 而是能够挤压我的 所以... 我有一个导航选项卡，如下所示： 我正在使用省略号，但我不喜欢我的导航分散在第二行。我不想使用 nav-justfied，而是能够挤压我的 ，以便它适合屏幕，并且用户不必水平滚动。 像下面这样 到目前为止我的代码 .nav-tabs>li:not(.active)>a { background-color: white; border: 1px solid #ddd; border-bottom: none; border-top: 3px solid #9d9d9d; text-overflow: ellipsis; max-width: 10em; overflow: hidden; display: block; } .nav-tabs { padding-left: 15px; padding-right: 15px; padding-top: 15px; white-space: nowrap; } <ul class="nav nav-tabs"> <div class="btn-toolbar pull-right"> {% block tab_buttons %} {% endblock %} </div> <li role="presentation" class="{% if '/hosts' in request.path %}active {% endif %}inverse"><a href="{% url 'sc:events:hosts-list' event.id %}" role="tab">Hosts</a></li> {% for tab in event.benchmarks.all %} <li role="presentation" class="{% if 'summary' in request.path and tab == benchmark %}active {% endif %}inverse"><a href="{% url 'sc:events:benchmarks-summary' event.id tab.id %}" role="tab">{{ tab.name }}</a></li> {% endfor %} </ul> 我不是 100% 确定你在问什么，但听起来你可以从使用中受益： 在导航栏上显示 flex。 如果您在同一页面上加载内容（如管理面板），我强烈推荐Jquery Tabs。 在选项卡上使用 Display:inline-flex; css 属性。

Html 中的新标签

我正在制作一个网站，该网站接受用户的输入（文本），查找文本中的特定单词，并返回突出显示单词的全文。虽然我想在新选项卡中显示结果，...

C + WinAPI：如何使用Tab键在控件之间切换？

我使用 WinAPI 用 C 创建了一个小应用程序，但有一个小问题。 Tab 键不会在控件之间切换。 应该是自动的吗？如果没有，您能告诉我如何实施吗？ 我做了一个

如何在 React/Antd 中将 Tab Bar 标题创建为固定/粘性？

我需要修复在抽屉中打开的标签栏标题。这是我尝试过的。 Antd 推荐使用react-sticky lib。不知怎的，它不起作用。也许原因是抽屉卷轴等。E...