JS 代码:复制
var Goaler={ init:function(){ var elms = document.getElementsByName("sliding"); for(var g=0; g<elms.length; g++){ var lielms = elms[g].getElementsByTagName('LI'); for(var i=0; i<lielms.length; i++){ lielms[i].onmousedown = function(){ var pnobj = this.parentNode.parentNode.nextSibling.tagName == "DIV" ? this.parentNode.parentNode.nextSibling : this.parentNode.parentNode.nextSibling.nextSibling; var objsx = pnobj.getElementsByTagName('UL'); var elmsx = this.parentNode.getElementsByTagName('LI'); var thisx = 0; for(var j=0; j<elmsx.length; j++){ if(elmsx[j] == this) thisx = j; elmsx[j].className = ""; objsx[j].style.display = "none"; } this.className = 'on'; objsx[thisx].style.display = ""; } } } } }
CSS 代码:复制
.switcher{ font-size:12px; width:500px; } .switcher .asksliding { border:1px solid #225D98; background:#C0D6E5; height:22px; border-bottom:0px solid #225D98; } .asksliding .AskSlidingName { float:left; line-height:20px; text-indent:2px; font-weight:bold; } .asksliding .askST{ float:right; list-style:none; margin:0px 5px 0px 0px; } .asksliding .askST li{ float:left; margin:3px 0px 0px 3px; padding:0px 12px; height:20px; line-height:20px; cursor:pointer; } .asksliding .askST .on{ float:left; background:#fff; margin-top:2px; color:#c30; border:1px solid #225D98; border-bottom:0px; cursor:default; z-index:999; position:relative; bottom:0px !important; bottom:-1px; } .askSC{ background:#fff; border:1px solid #225D98; } .askSC ul{ padding:2px; list-style:none; margin:0px; text-align:center; } .askSC ul li{ padding:0px 5px 0px 16px; line-height:20px; overflow:hidden; white-space:nowrap; margin:0px; }
HTML 代码:复制
<div class="switcher"> <div class="asksliding" id="sliding" name="sliding"> <span class="AskSlidingName">■ 标题名称</span> <ul class="askST"> <li class="on">标签一</li> <li>标签二</li> </ul> </div> <div class="askSC"> <ul> <div>标签一的内容</div> </ul> <ul style="display:none"> <div>标签二的内容</div> </ul> </div> <script type="text/javascript">Goaler.init()</script> </div>