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>