tabs 相关问题

MaterialUI React 选项卡下划线厚度

如何更改 React 中材质选项卡的下划线粗细？尝试修改下面的代码。 如何更改 MaterialUI 的 React Tabs 组件的下划线颜色？ 如何更改 React 中材质选项卡的下划线粗细？尝试修改下面的代码。 如何更改MaterialUI的React Tabs组件的下划线颜色？ <Tabs TabIndicatorProps={{style: {backgroundColor: "white"}}}> <Tab label='Tab 1'/> <Tab label='Tab 2'/> </Tabs> 您可以将 height: <value_in_pixel> 添加到 style 的 TabIndicatorProps 属性中，如下所示： <Tabs TabIndicatorProps={{style: {backgroundColor: "white", height: 20}}}> <Tab label='Tab 1'/> <Tab label='Tab 2'/> </Tabs> 您可以查看 this StackBlitz，了解此解决方案的实时工作示例。

如何使用 tkinter 在 GUI 中保存动态选项卡的内容

我在用 Python 中的 tkinter 创建的 GUI 环境中保存动态选项卡的内容时遇到问题。当我输入内容并单击保存按钮时，创建的文本文件仅显示内容...

Docusaurus（基于 mdx）选项卡：如何在一个选项卡中创建一个链接，将我带到另一选项卡中的某些内容？

使用 docusaurus 文档作为起点：https://docusaurus.io/docs/markdown-features/tabs 假设我想在苹果中写一些文本，然后说“如果你想转到橙子，请单击 h...

如何使用 Tab.Navigator screenOptions 更改活动选项卡颜色？

我正在使用 React Native，特别是 React Navigation 中的 createMaterialTopTabNavigator。我希望选项卡能够正常工作，这样当您按下一个选项卡时，它会变成紫色，而其他选项卡则处于非活动状态......

不同颜色的选定选项卡

我有一个页面，其中包含指向另一个带有选项卡的页面的链接。 目标 这是 HTML 我有一个页面，其中包含指向另一个带有选项卡的页面的链接。 <a href="https://example.com/page#span-01">Goal</a> 这是 HTML <div id="builder_tabs" class="tab-buttons tab-buttons-left"> <ul class="nav nav-tabs"> <li class="active"><a href="#builder_tabs-0" data-toggle="tab"> <span id="span-00">Span00</span></a></li> <li><a href="#builder_tabs-1" data-toggle="tab"> <span id="span-01">Span01</span></a></li> <li><a href="#builder_tabs-2" data-toggle="tab"> <span id="span-02">Span02</span></a></li> <li><a href="#builder_tabs-3" data-toggle="tab"> <span id="span-03">Span03</span></a></li> </ul> <div class="clearboth"></div> </div> <div class="tab-content"> <div class="tab-pane fade active in" id="builder_tabs-0"><strong>Tab-0</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-1"><strong>Tab-1</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-2"><strong>Tab-2</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-3"><strong>Tab-3</strong> <p>Lorem Ipsum text</p> </div> </div> 还有有效的 JQuery。 (function($) { $(document).ready( function() { var query = window.location.hash.substring(1); if ($(query) ) { $("ul.nav.nav-tabs li").removeClass("active"); $("#"+query).closest("li").addClass("active "+query ); $(".tab-content").addClass(query).show(); $(this).addClass(query).show(); } }); })(jQuery); 并根据查询使用 CSS。在此示例中，span-01 .tab-content.span-01, li.active.span-01 a { background-color: powderblue;} 现在该部分正在工作，我还想在停留在选项卡页面上时更改背景颜色。使用此代码，所选选项卡的背景颜色在每个选项卡上都是相同的。这不是它应该的工作方式。 当我单击选项卡时，我的想法是检索 span id 的值（我的意思是 span-01,02,03 或 04 ）并保留此变量以将其添加到选项卡内容类中。 这样做有什么建议吗？ 要实现您所描述的行为，其中每个选项卡的所选选项卡的背景颜色都不同，您可以修改 jQuery 代码以在单击选项卡时捕获跨度 ID，然后使用该信息设置适当的背景颜色。 这是 jQuery 代码的更新版本： (function($) { $(document).ready(function() { // Function to set the background color based on the span ID function setTabBackgroundColor(spanId) { // Remove existing classes based on span IDs $(".tab-content").removeClass("span-00 span-01 span-02 span-03"); // Add the class based on the provided span ID $(".tab-content").addClass(spanId); } // Initial check on page load var query = window.location.hash.substring(1); if ($(query)) { $("ul.nav.nav-tabs li").removeClass("active"); $("#" + query).closest("li").addClass("active " + query); $(".tab-content").addClass(query).show(); setTabBackgroundColor(query); } // Click event for tabs $("ul.nav.nav-tabs li a").on("click", function() { var spanId = $(this).find("span").attr("id"); setTabBackgroundColor(spanId); }); }); })(jQuery); 通过此代码，它引入了 setTabBackgroundColor 函数，该函数根据跨度 ID 删除现有的类，并根据提供的跨度 ID 添加适当的类。选项卡的单击事件现在调用此函数来在单击选项卡时更新背景颜色.针对不同的span ID相应地调整CSS。 这是一个更干净的版本，简化了一些逻辑并使其更像 jQuery。 var $tabView = $('.tab-view'); // Let's simulate loading tab Span02 var tabId = window.location.hash.substring(1) || 'builder_tabs-2' handleNavigation($tabView, tabId); // Click handler $tabView.on('click', '.nav-tabs a', function(e) { var tabId = new URL(this.href).hash.substring(1); handleNavigation($tabView, tabId); }); function setActiveTab($tabView, tabId) { // Tabs $tabView .find('.tab-buttons .nav-tabs li') .removeClass('active') .find('a[href="#' + tabId + '"]') .closest('li') .addClass('active'); // Panes $tabView .find('.tab-content .tab-pane') .removeClass('active') .filter('#' + tabId) .addClass('active'); } function handleNavigation($tabView, tabId) { if (tabId) { setActiveTab($tabView, tabId); } } :root { --tab-active: lightblue; --tab-inactive: lightgrey; } html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; flex-direction: column; align-items: center; justify-content: center; } .tab-view { display: flex; flex-direction: column; border: thin solid grey; } .tab-buttons ul { display: flex; flex-direction: row; justify-content: space-between; list-style-type: none; margin: 0; padding: 0; } .tab-buttons ul li { display: flex; flex-direction: column; justify-content: center; align-items: center; background: lightgrey; flex: 1; margin: 0; padding: 0.5rem 1rem; background: var(--tab-inactive); } .tab-buttons ul li.active { background: var(--tab-active); } .tab-buttons ul li a { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; } .tab-content { display: flex; flex-direction: column; flex: 1; } .tab-content .tab-pane { display: none; background: var(--tab-active); padding: 1rem; } .tab-content .tab-pane.active { display: flex; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <div class="tab-view"> <div id="builder_tabs" class="tab-buttons tab-buttons-left"> <ul class="nav nav-tabs"> <li class="active"> <a href="#builder_tabs-0" data-toggle="tab"> <span id="span-00">Span00</span></a> </li> <li> <a href="#builder_tabs-1" data-toggle="tab"> <span id="span-01">Span01</span></a> </li> <li> <a href="#builder_tabs-2" data-toggle="tab"> <span id="span-02">Span02</span></a> </li> <li> <a href="#builder_tabs-3" data-toggle="tab"> <span id="span-03">Span03</span></a> </li> </ul> <div class="clearboth"></div> </div> <div class="tab-content"> <div class="tab-pane fade active in" id="builder_tabs-0"><strong>Tab-0</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-1"><strong>Tab-1</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-2"><strong>Tab-2</strong> <p>Lorem Ipsum text</p> </div> <div class="tab-pane fade" id="builder_tabs-3"><strong>Tab-3</strong> <p>Lorem Ipsum text</p> </div> </div> </div>

在 Woocommece 选项卡标题上添加特定的 Fontawesome 图标

我正在尝试在我的每个 Woocommerce 选项卡上添加一个自定义的 fontawesome 图标，你知道，产品页面中的图标：描述/附加信息/评论。 我尝试过这样的事情： 李.

如何将过滤器应用到新选项卡

大家好，如果我想在这些新选项卡中应用一项措施，以便仅在选择过滤器的情况下才应显示值，而如果不是可视化符号的符号是 --，w...

我应该使用react-router作为选项卡组件吗？

我正在寻找构建一个选项卡组件，其中一些选项卡将包含动态内容。我最初开始遵循本教程： 使用 React 创建选项卡组件 阅读完后...

如何在不使用 jQuery 的情况下根据最完整选项卡的内容设置 HTML 选项卡高度？

我正在使用一个学习管理系统，该系统能够注入自定义 html、css 和 javascript。 我已经整理了一个选项卡式内容模板，可以在 LMS 的约束下工作

如何在 Angular 中的 ant design 角度选项卡视图中添加左右导航箭头？

我想添加左右箭头来单击选项卡视图。仅多 5 个选项卡可见。 我使用了 ant design 新版本（13.1..），它会显示一个下拉菜单，我不需要下拉菜单。 怎么解决

当我按alt+tab时，VS code会自动保存，并格式化代码，如何停止它？

当我按alt+tab时，VS code会自动保存，并格式化代码，如何停止？ 每当我编写一些代码并按 alt+tab 转到另一个选项卡时，VS Code 就会自动保存代码并对其进行格式化。但是...

如何更改 TWebPageControl 组件中的选项卡位置？

我在表单中添加了一个 TWebPageControl 组件，其中包含三个选项卡，但选项卡与顶部对齐： 有没有办法将选项卡对齐到底部或左侧而不是顶部？ 我想要一个...

缺少资源视图选项卡 - Microsoft Visual Studio Community 2022

我的笔记本上安装了 Microsoft Visual Studio Professional 2022 和 Microsoft Visual Studio Community 2022。 Microsoft Visual Studio Professional 2022 确实有一个“资源视图”选项卡（请参阅

在mudblazor中选择图标时如何将自定义选项卡面板中图标的背景颜色从透明更改为灰色？

我创建了一个泥浆自定义选项卡面板，其中包含三个图标，背景颜色是透明的，如果我选择任何一个图标，即使鼠标移出，图标背景也应更改为灰色。 <

VFP 多行标题选项卡

我正在使用 VFP 9.0 中的页面框架控件和一堆选项卡。我试图在每个选项卡中实现多行标题，如以下屏幕所示，但我不知道该怎么做。 我尝试过这些，...

Angular - 带下拉菜单的响应式选项卡

我目前有以下代码（下面的示例），我根据可用宽度将选项卡隐藏并移动到下拉菜单中。到目前为止，一切都很顺利。然而现在，...

为什么当各自的内容面板超过 32 个字符时，选项卡标签宽度开始变窄？

我正在使用daisyUI的单选选项卡抬起+选项卡内容。代码与演示相同，除了我只使用 2 个选项卡并向其中填充内容： 我正在使用 daisyUI 的 radio 选项卡抬起 + 选项卡内容。代码与演示相同，除了我只使用 2 个选项卡并向其中填充内容： <div role="tablist" class="tabs tabs-lifted"> <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" /> <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div> <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked /> <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"> 1111 2222 3333 4444 5555 6666 77 </div> </div> (顺风游乐场) 在 32 个字符时，选项卡标签宽度的行为符合预期：它们填充了所有水平空间： 从32开始，他们有点压扁了： 每个添加字符都会进一步压缩宽度。它达到了 53 个字符的最小值： 如果我们再次开始，但这次我们不使用空格，那么在开始挤压之前最大长度为 7： 当字符长度用完可用的水平空间时，宽度达到最小值： 挤压仅在其各自的选项卡上生效。另一颗完好无损。 为什么会出现这种情况？我该如何预防这种情况？ 您可以通过将选项卡面板的 grid-column 设置为您拥有的选项卡数量来防止这种情况： <script src="https://cdn.tailwindcss.com/3.4.1"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/daisyui/4.6.1/full.css" integrity="sha512-XpYSkIPzmQpbWTGbLUWq0HyRQ5n9RZFeH8TrfqIykNiE8OXQLn207Am0aU4nVplNE8vvJ1qCY6JvD9weUAyosQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="w-[274px]"> <div role="tablist" class="tabs tabs-lifted"> <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 1 is very long" /> <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6"></div> <input type="radio" name="my_tabs_2" role="tab" class="tab" aria-label="Tab 2 is very very long" checked /> <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6 !col-span-2"> 11112222333344445555666677 </div> </div> </div> 至于为什么会发生，.tab-content有： grid-column-start: 1; grid-column-end: span 9999; 在 274px 的小宽度下，.tab-content 的内容变得很重要，并影响 .tab-content 跨越的其他 9997 个网格列轨道的宽度，从而缩小选项卡标签所在的网格列轨道。

PyQt4 关闭请求关闭的选项卡

我找不到关闭请求关闭的选项卡的方法。我只找到了如何关闭当前小部件和当前选项卡。有任何想法吗？我在互联网上找不到线索。 self.tabs.tabCloseRequested.co...

Ant Design 选项卡：隐藏更多元素

我需要左侧选项卡，其中包含两个带有组件选项卡的项目（ant.design）。 该组件向我显示了“更多元素”，但我现在不知道如何隐藏它。 我的代码： ... 常量选项卡项 = [ {标签：'选项卡 1'，k...

选项卡控件上闪烁 - WIN32

我有一个WIN32应用程序。它的主窗口是 hwndMain，它的子窗口之一是 hwndView。 hwndView上有一个选项卡控件hwndTab。 当我调整 hwndMain 大小时，hwndView 也会调整大小，hwndTab 也会调整大小。它