<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style> ???body,ul{margin:0;padding:0;} ???li{list-style:none;} ???#tab{width:216px;margin:30px auto;} ???#tab ul{width:216px;height:32px;} ???#tab li{float:left;width:60px;height:24px;text-align:center;font-size:14px;line-height:24px;margin-left:10px;border:1px solid #000;background:#CCCCCC} ???#tab .active{background:#FFFF00;} ???#tab div{width:224px;height:200px;background:#CCCCCC;display:none;} ???#tab .show{display:block;}</style><script> ???window.onload =function(){ ???????var oDiv = document.getElementById(‘tab‘); ???????var aLi = oDiv.getElementsByTagName(‘li‘); ???????var aDiv = oDiv.getElementsByTagName(‘div‘); ???????var lastIndex = 1; ???????for(var i=0;i<aLi.length;i++){ ???????????aLi[i].index = i; ???????????aLi[i].onclick = function(){ ???????????????????????????????/*方法- ???????????????for(var j=0;j<aLi.length;j++){ ???????????????????aLi[j].className = ‘‘; ???????????????????aDiv[j].style.display = ‘none‘; ???????????????} ???????????????*/ ???????????????/*方法二*/ ???????????????????????????????aLi[lastIndex].className = ‘‘; ???????????????aDiv[lastIndex].style.display = ‘none‘; ???????????????????????????????this.className ?= ‘active‘; ???????????????aDiv[this.index].style.display = ‘block‘; ???????????????lastIndex = this.index; ???????????}; ???????} ???};</script></head><body><div id=‘tab‘> ???<ul> ???????<li>port端口</li> ???????<li class=‘active‘>静态Mac</li> ???????<li>vlan列表</li> ???</ul> ???<div class=‘hide‘>interface gig1/1/1</div> ???<div class=‘show‘>mac 0001.0002.0004</div> ???<div class=‘hide‘>vlan 1 2 3</div></div></body></html>js 实现简单的选项卡
原文地址：https://www.cnblogs.com/moon-yyl/p/9034988.html