js选项卡

最新推荐文章于 2019-06-03 19:59:16 发布

原创最新推荐文章于 2019-06-03 19:59:16 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

47 篇文章

订阅专栏

网站常用效果之选项卡切换效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js选项卡</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding: 0;}
	.clearfix:before, .clearfix:after{content: ""; display:table;}
	.clearfix:after{clear:both; overflow: hidden;}
	.clearfix{zoom:1;}
	.f-wrap{width: 450px; margin:50px auto; text-align: left;}

	#tabNav li{float: left; display: inline; width:150px; height:30px; line-height:30px; text-align:center; background-color: #f0f0f0; border-left: 1px solid #fff; margin-left:-1px; cursor: pointer;}
	#tabNav li.active{background-color:green; color:#fff;}
	#tabCont{width:430px; height:180px; background-color:green; padding: 10px; color:#fff;}
	#tabCont .item{display: none;}
</style>
</head>
<body>
	<div class="f-wrap">
		<ul id="tabNav" class="clearfix">
			<li class="active">菜单一</li>
			<li>菜单二</li>
			<li>菜单三</li>
		</ul>
		<div id="tabCont">
			<div class="item" style="display:block;">内容一</div>
			<div class="item">内容二</div>
			<div class="item">内容三</div>
		</div>
	</div>
    <script>
    window.onload = function(){
    	var oTabNav = document.getElementById('tabNav');
    	var aLi = oTabNav.getElementsByTagName('li');

    	var oTabCont = document.getElementById('tabCont');
    	var aItem = oTabCont.getElementsByTagName('div');

    	for(var i=0; i<aLi.length; i++){
    		aLi[i].index = i;
    		aLi[i].onclick = function(){
    			// 清除所有
    			for(var i=0; i<aLi.length; i++){
    				aLi[i].className = '';
    				aItem[i].style.display = 'none';
    			}
    			this.className = 'active';
    			aItem[this.index].style.display = 'block';
    		}
    	}
    }
    </script>
</body>
</html>