tabs 相关问题

一种用户界面模式，允许在内容的上方，下方或侧面显示带有导航参考的多个页面或元素。单击导航参考时，一个元素可见，而其他元素则关闭。通常，导航参考以指示其当前可见的方式进行颜色编码。

我正在创建一个使用 React Navigation 的 React Native 应用程序。在我的 1 个选项卡中，我有 3 个屏幕。如果我位于该选项卡中不是主屏幕的任何屏幕，并且我点击选项卡 ico...

react-native tabs react-navigation focus hook

回答 1 投票 0

我有一个问题。我有一个纯 CSS 选项卡容器。但是当我单击一个选项卡时，它应该以某种方式变为活动状态。我已经尝试过使用和我有一个问题。我有一个纯 CSS 选项卡容器。但是当我单击一个选项卡时，它应该以某种方式变为活动状态。我已经用 <input type="radio" /> 和 <label for="foo"> 尝试过了但是锚<a href="#tabX"></a>不再起作用了。有什么想法吗？ JSFIDDLE 既然您已经使用了哈希#，您可以使用伪类:target。为了展示其工作原理，我添加了额外的 span 以便能够同时定位锚点 a 和 div。使这项工作成功的主要 3 个因素是 span、:target ~ ... 和 #tab1:target ~ ... 规则。将 span 放置在我们可以使用同级选择器之前，仅使用 1 个哈希来定位 1 个或多个元素。使用 :target ~ ... 规则，当哈希存在时，我们会重置初始显示的选项卡及其内容最后我们使用每个#tab1:target ~ ...规则来标记所选选项卡并显示其内容另请参阅 CSS 中的注释，其中解释了所使用的步骤。 ul { margin: 0; padding: 0; width: 100%; display: inline-block; } ul li { list-style: none; float: left; } ul li a { color: #FFF; background: #333; display: block; padding: 10px; text-decoration: none; } .hideme { display: none; } .tabcontainer { width: 100%; } .tabcontainer .tab { position: absolute; display: none; } /* set the first link's background and show its div on page load */ ul li:first-child a, .tab:first-child { background: #638DB2; display: block; } /* reset the first link's background and hide its div when a hash tag exist */ :target ~ ul [href="#tab1"] { background: black; } :target ~ .tabcontainer #tab1div { display: none; } /* set the hashed/targeted link's background and show its div */ #tab1:target ~ ul [href="#tab1"], #tab1:target ~ .tabcontainer #tab1div { background: #638DB2; display: block; } #tab2:target ~ ul [href="#tab2"], #tab2:target ~ .tabcontainer #tab2div { background: #FF4C43; display: block; } #tab3:target ~ ul [href="#tab3"], #tab3:target ~ .tabcontainer #tab3div { background: #C1CC14; display: block; } #tab4:target ~ ul [href="#tab4"], #tab4:target ~ .tabcontainer #tab4div { background: #ADB257; display: block; } <span id="tab1" class="hideme"></span> <span id="tab2" class="hideme"></span> <span id="tab3" class="hideme"></span> <span id="tab4" class="hideme"></span> <ul> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> </ul> <div class="tabcontainer"> <div id="tab1div" class="tab"> 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab2div" class="tab"> 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab3div" class="tab"> 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab4div" class="tab"> 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> 对于那些想要脚本版本的人，我刚刚将源代码编辑为片段并添加了一些 jQuery 函数。 $(document).ready(function(){ var currentTab = $("#buttonTab1") $("#buttonTab1").click(function(){ currentTab.removeClass(); currentTab = $(this); $(this).addClass("tab1") }); $("#buttonTab2").click(function(){ currentTab.removeClass(); currentTab = $(this); $(this).addClass("tab2") }); $("#buttonTab3").click(function(){ currentTab.removeClass(); currentTab = $(this); $(this).addClass("tab3") }); $("#buttonTab4").click(function(){ currentTab.removeClass(); currentTab = $(this); $(this).addClass("tab4") }); }); ul { margin: 0; padding: 0; width: 100%; display: inline-block; } ul li { list-style: none; float: left; background: #333; } ul li a { color: #FFF; display: block; padding: 10px; text-decoration: none; } .tabcontainer { width: 100%; } .tab:not(:first-child) { display: none; } .tab { position: absolute; } .tab:target { display: block; } .tab1 { background: #638DB2; } .tab2 { background: #FF4C43; } .tab3 { background: #C1CC14; } .tab4 { background: #ADB257; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li><a id="buttonTab1" class = "tab1" href="#tab1">Tab 1</a></li> <li><a id="buttonTab2" href="#tab2">Tab 2</a></li> <li><a id="buttonTab3" href="#tab3">Tab 3</a></li> <li><a id="buttonTab4" href="#tab4">Tab 4</a></li> </ul> <div class="tabcontainer"> <div id="tab1" class="tab tab1"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab2" class="tab tab2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab3" class="tab tab3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div id="tab4" class="tab tab4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> 我使用 @Asons 答案并将其扩展为一个完整的迷你站点，其中使用 URL 中的 ID 的纯 CSS 选项卡解决方案，然后使用 JavaScript 和 HTML data- 属性添加可在每个选项卡内容中工作的跳转链接。这是必要的，因为 CSS 选项卡解决方案已经使用了 ID，因此我们需要 JavaScript 来保持当前选项卡在视图中并跳转到选项卡内内容。这是 GitHub 上的结果：纯 CSS 选项卡，每个选项卡内容中带有可选的 JavaScript 跳转链接。使用命名/编号约定，我编写了可扩展的代码（根据需要使用多个或几个选项卡等）。您还可以在 GitHub 页面上看到这些 CSS 选项卡在此处工作。

html css sass tabs

回答 3 投票 0

Puppeteer 关闭新标签页

我正在使用 puppeteer，我有一个小问题，偶尔会出现带有广告的新选项卡，并停止整个脚本。我正在寻找一种方法来基本上检测浏览器窗口中的第三个选项卡何时...

tabs puppeteer

回答 2 投票 0

我创建了一个复合模板，如果我添加 2 个文档，则添加 2 个相同的签名选项卡，但我希望每个文档都有一个签名选项卡

我创建了一个复合模板。对于复合模板中添加的每个文档，都会在文档中添加相同的签名选项卡，例如 - 3 个文档，然后在上面添加 3 个选项卡。我想要一个...

java tabs docusignapi composite

回答 1 投票 0

VS Code 中工作区的布局选项卡存储在哪里？

我想知道工作区存储的布局选项卡在哪里。因为当我在不同的电脑上打开 .code-workspace 文件时，布局不会保存在文件中。如果我...

tabs visual-studio-code project

回答 1 投票 0

在React输入元素中按tab键时如何输入空格的tab大小？

我想在React元素的或<input>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，而其他反应元素被指向。我怎样才能...</desc> <question vote="0"> <p>我想在React元素的<pre><code><textarea></code></pre>或<pre><code><input></code></pre>中输入空格的制表符大小。但是当按 Tab 键时，焦点离开文本区域或输入，并且其他反应元素被指向。</p> <p>如何捕获此事件并将焦点保持在文本区域或输入，并将制表符大小的空格添加到当前光标位置？</p> <p>我试图喜欢这个，但没有帮助。</p> <pre><code>const import { useState } from "react"; import ReactDOM from "react-dom/client"; function Car() { const [brand, setBrand] = useState("Ford"); const [description, setDescription] = useState("It's a red color Mustang from 1964"); const setCarBrand = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setBrand(e.target.value); e.preventDefault(); } const setCarDescription = (e) => { if(e.keydown == 'tab') setBrand(brand + ' '); else setDescription(e.target.value); e.preventDefault(); } return ( <> <h1>My {brand}</h1> <p> {description} </p> <br/> <label>{brand}: <label/> <input id="brand" placeholder={brand} value={brand} onChange={setCarBrand} /> <label>{description} : <label/> <textarea id="description" placeholder={description} value={description} onChange={() => setCarDescription()} /> </> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Car />); </code></pre> </question> <answer tick="false" vote="0"> <p>您可以在 setCarBrand 和 setCarDescription 函数中添加此代码。</p> <pre><code>if(e.keyCode === 9) { // tab was pressed // get caret position/selection var start = this.selectionStart; var end = this.selectionEnd; var target = e.target; var value = target.value; // set textarea value to: text before caret + tab + text after caret target.value = value.substring(0, start) + "\t" + value.substring(end); // put caret at right position again (add one for the tab) this.selectionStart = this.selectionEnd = start + 1; // prevent the focus lose e.preventDefault(); } </code></pre> </answer> </body></html>

javascript reactjs tabs textarea

回答 0 投票 0

VS Code 的选项卡组

VSCode 中是否可以以某种方式拥有选项卡组？也许有一个扩展或一个本机设置？例如。我正在开展一个项目，我希望有三个小组：文件...

visual-studio-code tabs ide

回答 5 投票 0

选项卡的动态数量

我有一个可以更改的选项卡名称列表，因此我想循环遍历这些名称并创建选项卡。其中，我想放置根据用户单击的选项卡而变化的各种按钮。我的

tkinter tabs

回答 1 投票 0

如何从 .NET Maui 中的 contentPage 后端导航到 TabbedPage？

我确实创建了一个包含现有页面和内容页面（用于测试）的选项卡式页面，在 MainPage.xaml 中我确实有一个按钮，我希望此按钮的事件导航到选项卡式页面。这里是...

c# .net tabs maui

回答 2 投票 0

数据切换选项卡无法下载传单地图

我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码：我正在使用选项卡来显示清晰的内容，但其中一个选项卡停止下载，因为它位于数据切换选项卡中。这是一张传单地图。这是代码：导航栏代码： <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">Données principales</a></li> <li><a data-toggle="tab" href="#carte">Carte</a></li> </ul> <div class="tab-content"> <div id="home" class="tab-pane fade in active">Lorem ipsum</div> <div id="carte" class="tab-pane fade"> **//see script below\\** </div> </div> 脚本： <div id="carteBenef"></div> <script type="text/javascript"> $(document).ready(function () { var map = new L.Map('carteBenef'); var cloudmadeUrl = 'http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png', subDomains = ['otile1', 'otile2', 'otile3', 'otile4'], cloudmadeAttrib = 'Data, imagery and map information provided by <a href="http://open.mapquest.co.uk" target="_blank">MapQuest</a>, <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> and contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/" target="_blank">CC-BY-SA</a>'; var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains}); var iades = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>) map.addLayer(cloudmade).setView(iades, 15); var benefLocation = new L.LatLng(<?php echo $beneficiaire->latitude . ', ' . $beneficiaire->longitude; ?>); var benef = new L.Marker(benefLocation); map.addLayer(benef); benef.bindPopup("<?php echo htmlspecialchars($beneficiaire->nom) . ' ' . htmlspecialchars($beneficiaire->prenom); ?>").openPopup(); }); </script> 地图在我将其放入选项卡之前就已经出现了，有人知道为什么它现在不起作用吗？如果您的 Leaflet 地图在调整浏览器窗口大小后突然正常工作，那么您会遇到经典的“地图初始化时地图容器大小无效”：为了正常工作，Leaflet 会在初始化时读取地图容器大小地图(L.map("mapContainerId"))。如果您的应用程序隐藏该容器（通常通过 CSS display: none;，或某些框架选项卡/模态/其他......）或稍后更改其尺寸，Leaflet 将不会知道新的尺寸。因此它不会正确渲染。通常，它仅下载它认为显示的容器部分的图块。如果容器在地图初始化时完全隐藏，则这可以是左上角的单个图块。将地图容器嵌入“选项卡”或“模态”面板时经常会出现此错误，可能使用流行的框架（Bootstrap、Angular、Ionic 等）。 Leaflet 监听浏览器窗口大小调整事件，并在事件发生时再次读取容器大小。这解释了为什么地图突然在调整窗口大小时起作用。您还可以在显示选项卡面板时通过调用 map.invalidateSize() 来手动触发此更新（例如，在选项卡按钮单击上添加侦听器），至少在第一次以正确的尺寸渲染容器时是如此。至于实现选项卡按钮单击侦听器，请对该主题执行新的搜索：对于大多数流行的框架，您应该有足够的可用资源。首先，感谢@ghybs 对为什么在这些情况下传单地图未正确显示的良好解释。对于那些尝试@ghybs的答案失败的人，您应该尝试调整浏览器的大小，而不是调用地图对象的方法： window.dispatchEvent(new Event('resize')); 正如@MarsAndBack所说，此修复可能会导致Leaflet的invalidateSize提供的平移/动画/等功能出现问题。我遇到这个问题是因为我使用了modal bootstarp。无论如何它都没有解决。我尝试了 map.invalidateSize() 和 window.dispatchEvent(new Event('resize')); 但没有修复。最终解决了这个问题： $('#map-modal').on('shown.bs.modal', function(event) {}); 'shown.bs.modal'事件意味着当模态完全加载并且大小没有任何混淆时，现在在其中编写您的代码。对于像我这样的人，无法通过珍贵的@ghybs 解释（map.invalidateSize()）解决这一挑战，并且能够通过@gangai-johann 来解决这一挑战，您仍然有机会以正确的方式做到这一点。将无效指令放入 setTimeout 内，因为分派该指令可能为时过早。 setTimeout(() => { this.$refs.mymap.mapObject.invalidateSize() }, 100) 请参阅 https://stackoverflow.com/a/56364130/4537054 答案以获取详细说明。

javascript twitter-bootstrap tabs toggle leaflet

回答 4 投票 0

如何在win32api应用程序中使多行文本框的制表符停止工作

我这里有一个用c编写的win32api应用程序。主窗口中的所有控件都是手动创建的，如下所示： hEditSource = CreateWindowEx(WS_EX_CLIENTEDGE, L"编辑", NULL, WS_VISIBL...

c winapi tabs

回答 1 投票 0

如何更改 GitHub 桌面应用程序中的选项卡大小？

我正在开发一个错误使用选项卡的项目，因此不喜欢 GitHub 桌面应用程序在差异中将它们显示为 4 个空格宽。这不太好，因为很难阅读...

github tabs settings github-for-windows github-for-mac

回答 2 投票 0

如何在android中获取backstack片段条目列表？

我正在开发一个应用程序，其中选项卡是使用 FragmentActivity 实现的。由于整个应用程序都需要选项卡，因此广泛使用片段来使应用程序兼容...