我如何在HTML中制作标签式视图？ [英] How do I make a tabbed view in HTML?
本文介绍了我如何在HTML中制作标签式视图？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当点击标签A时，显示标签A的内容。点击标签B，显示标签B的内容等。
什么是最简单的兼容的方式来构建一个HTML代码片段？
我不是说在这里使用任何库，所以没有 jQuery 或任何其他库。
想要推出自己的标签控件，你可以这样做：
< html>
< head>
< script type =text / javascript>
函数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'）>标签1< / a>
< / li>
< li>
< a href =javascript：activateTab（'page2'）>标签2< / a>
< / li>
...
< / ul>
< div id =tabCtrl>
< div id =page1style =display：block;> Page 1< / div>
< div id =page2style =display：none;>第2页< / div>
...
< / div>
< / body>
< / html>
When clicking on tab A, show content for tab A. Click on tab B, show content for tab B, and so on.
What's the most simple and compatible way of constructing a HTML snippet?
I don't mean to use any libraries here, so none of jQuery or any other libraries.
解决方案
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>
这篇关于我如何在HTML中制作标签式视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
