tab切換——點擊

時間  2020-01-18
標籤 tab 切換 點擊 简体版
原文   原文鏈接

tab切換——點擊html

<!doctype html>
<html lang="'en">
<head>
	<meta charset="UTF-8">
	<title>Tab切換-自動</title>
</head>
<style>
	*{margin:0;
  padding:0;
  list-style:none;
  font-size:12px;}

.notice{width:298px;
        height:98px;
        margin:10px;
        border:1px solid #eee;
        overflow:hidden;}

.notice-tit{height:27px;
            position:relative;
            background:#F7F7F7;}

.notice-tit ul{position:absolute;
               width:301px;
               left:-1px;}

.notice-tit li{float:left;
               width:58px;
               height:26px;
               line-height:26px;
               text-align:center;
               overflow:hidden;
               background:#FFF;
               padding:0 1px;
               background:#F7F7F7;
               border-bottom:1px solid #eee;}

.notice-tit li.select{background:#FFF;
                      border-bottom-color:#FFF;
                      border-left:1px solid #eee;
                      border-right:1px solid #eee;
                      padding:0;
                      font-weight:bolder;}

.notice li a:link,.notice li a:visited{text-decoration:none;
                                               color:#000;}

.notice li a:hover{color:#F90;}

.notice-con .mod{margin:10px 6px;}

.notice-con .mod ul li{float:left;
                       width:143px;
                       height:25px;
                       overflow:hidden;}


</style>
<body>
	<div id="notice" class="notice">
		<div id="notice-tit" class="notice-tit">
		  <ul>
		  	<li class="select">
		  		<a href="#">公告</a>
		  	</li>
		  	<li>
		  		<a href="#">規則</a>
		  	</li>
		  	<li>
		  		<a href="#">論壇</a>
		  	</li>
		  	<li>
		  		<a href="#">安全</a>
		  	</li>
		  	<li>
		  		<a href="#">公益</a>
		  	</li>
		  </ul>
		</div>
		<div id="notice-con" class="notice-con">
			<div class="mod" style="display:block">
				<ul>
					<li>
						<a href="#">
                         	 張勇：要玩快樂足球
						</a>
					</li>
                    <li>
						<a href="#">
                          阿里2000萬馳援災區！
						</a>
					</li>
					<li>
						<a href="#">
                          旅遊寶讓你邊玩邊賺錢
						</a>
					</li>
					<li>
						<a href="#">
                          多行跟進阿里信用貸款
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          "濫發"即將換新
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          比特幣嚴管啦！
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          禁發商品名錄！
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">通知</a>
							]
						</span>
						<a href="#">
                          商品屬性限制
						</a>
					</li>
				</ul>
			</div>
			<div class="mod" style="display:none">
				<ul>
					<li>
						<span>
							[
                              <a href="#">聚焦</a>
							]
						</span>
						<a href="#">
                          金牌賣家再啓航
						</a>
					</li>
                    <li>
						<span>
							[
                              <a href="#">功能</a>
							]
						</span>
						<a href="#">
                          櫥窗規則升級啦
						</a>
					</li>
					<li>
						<span>
							[
                              <a href="#">話題</a>
							]
						</span>
						<a href="#">
                          又愛又恨優惠劵 
						</a>
					</li>
	                <li>
						<span>
							[
                              <a href="#">工具</a>
							]
						</span>
						<a href="#">
                          購後送店鋪紅
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          我的重要信息要管牢！
						</a>
					</li>
                    <li>
						<a href="#">
                           賣家防範紅包欺詐提醒
						</a>
					</li>
					<li>
						<a href="#">
                            更換收貨地址的陷阱！
						</a>
					</li>
	                <li>
                        <a href="#">
                           注意騙子的技術升級了！
						</a>
					</li>
				</ul>
			</div>
            <div class="mod" style="display:none">
				<ul>
					<li>
						<a href="#">
                          走進無聲課堂
						</a>
					</li>
                    <li>
						<a href="#">
                           淘寶之行大衆評審贏公益金
						</a>
					</li>
					<li>
						<a href="#">
                            愛心品牌聯合徵集
						</a>
					</li>
	                <li>
                        <a href="www.qianduanzhan.com">
                           前端站
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>
<script>
	function $(id){
	return typeof id ==="string"?document.getElementById(id):id;
}

window.onload=function(){
	var lis=$('notice-tit').getElementsByTagName('li'),
		divs=$('notice-con').getElementsByTagName('div');
	
	for(var i=0; i<lis.length;i++){
		lis[i].id=i;
		lis[i].onclick=function(){
			//先清除全部li上的select
			for(var j=0; j<lis.length; j++){
				lis[j].className="";
				divs[j].style.display="none";
			}
			//再給當前的li和div添加
			this.className="select";
			divs[this.id].style.display="block";
//			alert(this.id)
		}
	}
}

</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程