如何在HTML中创建选项卡式视图？
单击选项卡A时，显示选项卡A的内容。单击选项卡B，显示选项卡B的内容，依此类推 构建HTML代码段最简单、最兼容的方法是什么 我不打算在这里使用任何库，因此没有任何库或任何其他库。中的tabs小部件易于使用： jQueryTabs小部件完全在浏览器端工作——每个请求都会发送所有选项卡的内容，或者您可以编写JavaScript代码，使用Ajax动态加载选项卡内容如何在HTML中创建选项卡式视图？,html,tabbed-view,Html,Tabbed View,单击选项卡A时，显示选项卡A的内容。单击选项卡B，显示选项卡B的内容，依此类推 构建HTML代码段最简单、最兼容的方法是什么 我不打算在这里使用任何库，因此没有任何库或任何其他库。中的tabs小部件易于使用： jQueryTabs小部件完全在浏览器端工作——每个请求都会发送所有选项卡的内容，或者您可以编写JavaScript代码，使用Ajax动态加载选项卡内容 但它可能不适合您使用。考虑如果需要控制选项卡服务器端（也就是，单击一个制表符，向服务器发送一个新的页面请求-服务器构造具有标签外观的HT
但它可能不适合您使用。考虑如果需要控制选项卡服务器端（也就是，单击一个制表符，向服务器发送一个新的页面请求-服务器构造具有标签外观的HTML）。 如果您愿意使用JavaScript，则非常好。 < P>查看一个示例（例如，谷歌搜索“TabView JavaScript”）。.
显然，您可以将其与一些定制一起使用，但将其拆开并确定其用途是很有启发性的。它基本上是使用
显示样式启用或禁用
，并将其设置为block
或none
，如果“简单且兼容”是您唯一的两个标准，我建议使用。跨浏览器，并且易于实现。根据您的雄心壮志，它可能只是一个无序列表和一些
s（选项卡内容）的问题。然后，一个简单的JavaScript可以通过getElementById（）
，为所有
s设置显示属性：none
，用于除当前
或者，你可以看一看
编辑：不是唯一一个链接到jQuery站点的链接，似乎：）这里有一个关于如何构建它们的和教程是一个很好的指南-它是可访问的，并且（当JavaScript不可用时）会非常优雅地失败。如果您想要滚动您自己的选项卡控件，您可以这样做：
<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>
<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>
功能激活选项卡（页面ID）{
var tabCtrl=document.getElementById（'tabCtrl'）；
var pageToActivate=document.getElementById（pageId）；
对于（var i=0；i
...
第1页
第2页
...
如果您想实现自己的选项卡视图，只需执行以下操作：
<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>
<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>
.标签{
显示：无；
}
函数initTabView（）{
var x=document.getElementsByClassName（'tab-view'）
对于（变量i=0；i
可用。我需要在没有任何LIB的情况下实现它：（我需要在没有任何LIB的情况下实现它：（我需要在没有任何LIB的情况下实现它）：（在这种情况下，Jacob的解决方案简洁明了。谢谢，似乎9,1,3都是nodeType的可能值，对吗？根据，有12种可能。检查1主要防止我们获取可能属于选项卡页div的属性和文本节点。链接已断开。