页面选项卡上的语义

Posted 2021-02-27

<ul id="tabbed_sub">
	<li><a href="#one">Section 1</a></li>
	<li><a href="#two">Section 2</a></li>
 
	<li><a href="#three">Section 3</a></li>
	<li><a href="#four">Section 4</a></li>
</ul>
 
<div id="one">This is the content corresponding to #one</div>
<div id="two">This is the content corresponding to #two</div>
<div id="three">This is the content corresponding to #three</div>
<div id="four">This is the content corresponding to #four</div>
 
<script type="text/javascript">
 
	function setLink(i) {
		a[i].onclick = function () {
			div[i].style.display = "block";
			for(var j = 0; j < div.length; j++) {
				if (i != j) {
					div[j].style.display = "none";
				}
			} 
			return false;
		}
	}
 
	function initTabs() {
		var tabs = document.getElementById("tabbed_sub"); // put in id for tabbed list here
		var links = tabs.getElementsByTagName("a");
		div = [];
		a = [];
 
		//Initialize tabs
		for (var i = 0; i < links.length; i++) {
			div[i] = document.getElementById(links[i].href.substr(links[i].href.indexOf("#") + 1));
			if (i != 0) {
				div[i].style.display="none";
			} else { 
				div[i].style.display="block";
			}
			a[i] = links[i];
			setLink(i)
		}
	}
 
var W3CDOM = document.createElement && document.getElementsByTagName;
if(W3CDOM && document.getElementById("tabbed_sub")) { // check W3CDOM compatibility
	initTabs(); 
}
 
</script>