tabs 相关问题

如何更改 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，了解此解决方案的实时工作示例。

reactjs material-ui tabs

回答 1 投票 0

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

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

python user-interface tkinter tabs save

回答 1 投票 0

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

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

tabs docusaurus

回答 1 投票 0

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

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

react-native mobile tabs react-navigation react-navigation-bottom-tab

回答 1 投票 0

不同颜色的选定选项卡

我有一个页面，其中包含指向另一个带有选项卡的页面的链接。目标这是 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>

jquery tabs

回答 2 投票 0

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

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

css wordpress woocommerce tabs

回答 1 投票 0

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

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

image filter powerbi tabs

回答 1 投票 0

tabs 相关问题

最新问题