Menu
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.
626
The tab character can be inserted by holding the Alt and pressing 0 and 9 together.
Approach: In the body tag create some tabs under the div tag with a Custom-Data-Attribute that holds the id of the content. Create another div tag to store the content of the tab with a specific id. Specify data attributes for each content tag to display only one tab content at a time.
The \t metacharacter matches horizontal tabs (tabulators).
Unlike with HTML space, there is no particular HTML tab character you could use. You could technically use the 	 entity as the tab is character 9 in the ASCII. Unfortunately, HTML parsers will simply collapse it into a single space due to the whitespace collapse principle. There used to be a special tab element.
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>
Here is a list of different types of tabs plus tutorials on how to build them
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
