zoukankan      html  css  js  c++  java
  • JS---自己制作的选项卡

    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		*{
    			margin: 0;
    			padding: 0;
    		}
    
    		ul,li{
    			list-style-type: none;
    		}
    
    		#outer{
    			 400px;
    			height: 200px;
    			border: 1px solid #666;
    		}
    		#tab{
    			height: 30px;
    			background: #666;
    		}
    
    		#tab li{
    			 100px;
    			height: 30px;
    			line-height: 30px;
    			text-align: center;
    			float: left;
    			color: white;
    		}
    
    		#tab li.current{
    			background: #ccc;
    			color: 000;
    		}
    
    		#content ul{
    			display: none;
    		}
    	</style>
    </head>
    <body>
    	<div id="outer">
    		<ul id="tab">
    			<li class="current">html</li>
    			<li>css</li>
    			<li>js</li>
    		</ul>
    		<div id="content">
    			<ul style="display:block;">
    				<li>a</li>
    				<li>a</li>
    				<li>a</li>
    			</ul>
    			<ul>
    				<li>b</li>
    				<li>b</li>
    				<li>b</li>
    			</ul>
    			<ul>
    				<li>c</li>
    				<li>c</li>
    				<li>c</li>
    			</ul>
    		</div>
    	</div>
    
    	<script type="text/javascript">
    		var oLis=document.getElementById("tab").getElementsByTagName('li');
    		var oUls=document.getElementById("content").getElementsByTagName('ul');
    		for (var i = 0; i < oLis.length; i++) {
    			oLis[i].index=i;
    			oLis[i].onmouseover=function() {
    				for(var j=0;j<oLis.length;j++){
    					oLis[j].className='';
    					this.className='current';
    					oUls[j].style.display='none';
    					oUls[this.index].style.display='block';
    				}
    			}
    		};
    	</script>
    </body>
    </html>
    
  • 相关阅读:
    观察者模式
    vim7.4+python3配置
    GAN_李弘毅讲解
    关于Anaconda的环境和包管理
    inception v1-v3 & Xception
    python使用PDB进行调试
    python中“*”、"*args"、"kwargs"三种用法
    解决样本类别不平衡以及困难样本问题的方法总结
    Focal Loss
    RefineDet网络简介(转载)
  • 原文地址:https://www.cnblogs.com/beast-king/p/5436971.html
Copyright © 2011-2022 走看看