欢迎访问 水平网    今天是:2017年11月22日 注册 | 登录 | 订阅 | 收藏
>> JavaScript >> 标签切换效果
推荐代码
热点代码

标签切换效果

作者:未知,  来源:网络,  阅读:1346,  发布时间:2014-05-10  【放入收藏夹
代码: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>
Tags:标签切换tab
评论【共有0条评论】查看所有评论
昵称:(*)   邮箱:   QQ:   验证码: 看不清楚?点击刷新验证码