如何在 HTML 中创建选项卡式视图?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/1027663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a tabbed view in HTML?
提问by omg
When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on.
单击选项卡 A 时,显示选项卡 A 的内容。单击选项卡 B,显示选项卡 B 的内容,依此类推。
What's the most simple and compatible way of constructing a HTML snippet?
构建 HTML 片段的最简单和兼容的方法是什么?
I don't mean to use any libraries here, so none of jQueryor any other libraries.
我的意思不是在这里使用任何库,所以没有使用jQuery或任何其他库。
回答by Jacob
If you want to roll your own tab control, you could do something like this:
如果要滚动自己的选项卡控件,可以执行以下操作:
<html>
<head>
<script type="text/javascript">
function activateTab(pageId) {
var tabCtrl = document.getElementById('tabCtrl');
var pageToActivate = document.getElementById(pageId);
for (var i = 0; i < tabCtrl.childNodes.length; i++) {
var node = tabCtrl.childNodes[i];
if (node.nodeType == 1) { /* Element */
node.style.display = (node == pageToActivate) ? 'block' : 'none';
}
}
}
</script>
</head>
<body>
<ul>
<li>
<a href="javascript:activateTab('page1')">Tab 1</a>
</li>
<li>
<a href="javascript:activateTab('page2')">Tab 2</a>
</li>
...
</ul>
<div id="tabCtrl">
<div id="page1" style="display: block;">Page 1</div>
<div id="page2" style="display: none;">Page 2</div>
...
</div>
</body>
</html>
回答by Lark
Here is a list of different types of tabsplus tutorials on how to build them
回答by Quentin
回答by naren
If you want to implement your own tab view, just do it like this:
如果要实现自己的选项卡视图,只需这样做:
<html>
<head>
<style>
.tab {
display:none;
}
</style>
<script type="text/javascript">
function initTabView(){
var x = document.getElementsByClassName('tab-view')
for(var i=0; i < x.length; i++) {
x[i].onclick = displayTab;
}
var prevViewedTab = null;
function displayTab(e) {
var idOfTabToDisplay = this.getAttribute("data-tab")
if(prevViewedTab) {
prevViewedTab.style.display = 'none';
}
var tabToDisplay = document.getElementById(idOfTabToDisplay);
tabToDisplay.style.display = 'block';
prevViewedTab = tabToDisplay;
}
var defaultTab = document.getElementsByClassName('default-tab')
if (defaultTab.length) {
defaultTab[0].style.display = 'block';
prevViewedTab = defaultTab[0];
}
}
</script>
</head>
<body>
<ul>
<li>
<a data-tab="tab1" class="tab-view">Tab 1</a>
</li>
<li>
<a data-tab="tab2" class="tab-view">Tab 2</a>
</li>
<li>
<a data-tab="tab3" class="tab-view">Tab 3</a>
</li>
<li>
<a data-tab="tab4" class="tab-view">Tab 4</a>
</li>
</ul>
<div id="tabCtrl">
<div class="tab default-tab" id="tab1">This is Tab 1</div>
<div class="tab" id="tab2">This is Tab 2</div>
<div class="tab" id="tab3">This is Tab 3</div>
<div class="tab" id="tab4">This is Tab 4</div>
</div>
<script>
initTabView();
</script>
</body>
</html>
回答by Brian Agnew
Take a look at an example such as this(courtesy of a Google search for 'tabbed view javascript').
看看一个例子,如这(谷歌搜索“选项卡视图的javascript”提供)。
You can obviously use this with a little customisation, but it's instructive to take it apart and determine what it's doing. It's basically enabling or disabling <div>
using the display
style and setting it to block
or none
您显然可以通过一些自定义来使用它,但将其拆开并确定它在做什么是有益的。它基本上是启用或禁用<div>
使用display
样式并将其设置为block
或none
回答by Mark Hurd
If "simple and compatible" are your only two criteria, I'd suggest the jQuery UI Tabs plugin. Cross-browser, and a cinch to implement.
如果“简单和兼容”是您仅有的两个标准,我建议您使用jQuery UI Tabs 插件。跨浏览器,易于实现。
回答by jensgram
Depending on your ambitions, it could simply be a matter of an unordered list and a number of <div>
s (tab contents). Then a simple JavaScript could - by means of getElementById()
- set the display property for all the <div>
s: none
for all except the current.
根据您的野心,它可能只是一个无序列表和一些<div>
s(标签内容)的问题。然后一个简单的 JavaScript 可以 - 通过getElementById()
- 设置所有<div>
s:的显示属性,none
除了当前。
Alternatively, you could have a look at this.
或者,你可以看看这个。
Edit: Not the only one linking to the jQuery site, it seems :)
编辑:似乎不是唯一一个链接到 jQuery 网站的网站:)
回答by codeape
The tabs widget in jQuery UIis easy to use: http://jqueryui.com/demos/tabs/.
jQuery UI 中的选项卡小部件易于使用:http: //jqueryui.com/demos/tabs/。
The jQuery tabs widget works completely on the browser side - content for all tabs are sent on every request, or you could write JavaScript code that uses Ajax to load the tab contents dynamically.
jQuery 选项卡小部件完全在浏览器端工作——所有选项卡的内容在每次请求时发送,或者您可以编写使用 Ajax 动态加载选项卡内容的 JavaScript 代码。
But it might not be appropriate for your use. Consider if you need to control the tabs server-side (that is, a click on a tab sends a new page request to the server - the server constructs HTML that has the visual appearance of tabs).
但它可能不适合您的使用。考虑是否需要在服务器端控制选项卡(即,单击选项卡向服务器发送新页面请求 - 服务器构建具有选项卡视觉外观的 HTML)。
回答by Shane Fulmer
If you're open to using JavaScript, jQuery's tabis pretty nice.
如果您愿意使用 JavaScript,jQuery 的选项卡非常好。