Mikel
[转载]css与js实现Tab标签切换 – qandq – 博客园.
如下图所示的tab菜单切换，目前很流行这种效果。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tab标签切换</title><style>*{font-size:10.5pt;margin:0px;padding:0px;}.codeDemoUL {list-style: none;clear:right;overflow:hidden;cursor:pointer;z-index:3;position:relative;margin-bottom:-1px;}.codeDemoUL li {float:left;padding:5px 10px;display:inline;border-bottom:none;margin: 0 5px 0 0;overflow: visible;line-height:1.5em;}.codeDemomouseOnMenu {border:1px solid #bdc5c8;border-bottom:1px solid #fff;background-color:#fff;font-weight:bold;}.codeDemomouseOutMenu{border:1px solid #bdc5c8;background-color:#d7e0e3;}.codeDemoDiv {clear:both;border:1px solid #bdc5c8;overflow:hidden;margin-bottom:10px;}</style><SCRIPT LANGUAGE="JavaScript"><!--var $ = function(o) {return document.getElementById(o);}function showDiv(parm){$('divDemo').style.display='none';$('divCode').style.display='none';$(parm).style.display = '';for(var i in $('ulMenu').getElementsByTagName('LI')){$('ulMenu').getElementsByTagName('LI')[i].className = 'codeDemomouseOutMenu';}}//--></SCRIPT></head><body><ul class="codeDemoUL" id="ulMenu"><li class="codeDemomouseOnMenu" onclick="showDiv('divDemo');this.className='codeDemomouseOnMenu'">演 示</li><li class="codeDemomouseOutMenu" onclick="showDiv('divCode');this.className='codeDemomouseOnMenu'">代 码</li></ul><div class="codeDemoDiv" id="divDemo"><br /> 演示</div><div class="codeDemoDiv" id="divCode" style="display:none"><br /> 代码</div></body></html> |
