HTML+CSS实现的入门选项卡

        直接进入主题，实现一个最基本入门的选项卡，采用HTML+CSS的方式制作，关于这个我觉得最核心的就是页面载入时候对ul标签下的Li元素添加事件，比如选中选项卡一的时候内容一显示，内容二display:none即不显示就好了;还有我觉得比较重要的要用Float属性，往左浮动。

（最终效果图）

首先上界面代码：

    <div>
        <ul>
            <li class="select">&nbsp;&nbsp;&nbsp;选项卡一</li>        <!--相当于页面载入就选中的样子 select为选中样式-->
            <li>&nbsp;&nbsp;&nbsp;选项卡二</li>
        </ul>
        <div id="main">
            <div class="box">内容一</div>                    <!--主要设定的是长宽-->
            <div class="hidden">内容二</div>                <!--调用display:none载入时候不显示-->
        </div>
    </div>

样式：

最开始时候运行：

    （图1）是这样  此时只加了一个 ul,li{list-style:none;} 样式去掉圆点，下面开始加样式。

开始包装：

    1）.li节点的样式，li{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;height:30px;width:100px;margin-top:10px; } 给li元素加边框。

（图2）

        2）.给Div加边框，.box{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999; width:200px;height:300px;float:left;}  同时向左浮动。

（图3）

    3）.接下来加入 ul{float:left;} 让ul标签也向左浮动差不多效果图就出来了，鼠标移上选项卡的时候内容一所在的div显示，就是调用.hidden{ display:none;} 即可，选中的样式 .select{ background-color:#20B19F;}

（图4）

    基本到这里就差不多了，这时候只需要添加事件就行啦。

<script type="text/javascript">
	window.οnlοad=function(){
		var Node=document.getElementsByTagName('li')
		var ShowDiv=document.getElementById('main').getElementsByTagName('div');
		for(var i=0;i<Node.length;i++)
		{
			Node[i].index=i;
			Node[i].οnmοusemοve=function()  
			{
				for(var j=0;j<Node.length;j++)
				{
					Node[j].className="";
					ShowDiv[j].className="hidden";
				}
				Node[this.index].className="select";
				ShowDiv[this.index].className="box";
			}
		}
		
		var dNode = document.getElementById('UserSelect').getElementsByTagName('li');
        var info = document.getElementById('select_info').getElementsByTagName('div');
        for (var i = 0; i < dNode.length; i++) {
            dNode[i].index = i;
            dNode[i].onmousemove = function () {
                for (var j = 0; j < length; j++) {
                    dNode[j].className = "";
                    info[j].className = "hide";
                }
                dNode[this.index].className = "select";
                info[this.index].className = "box";
            }
        }
	}
</script>

完整代码：

    样式：

li{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;height:30px;width:100px;margin-top:10px; }
ul,li{list-style:none;}
.box{border-top:1px solid #999;border-left:1px solid #999;border-bottom:1px solid #999;border-right:1px solid #999; width:200px;height:300px;float:left;}
ul{float:left;}
.hidden{ display:none;}
.select{ background-color:#20B19F;}

    主体：

<div>
    	<ul>
        	<li class="select">   选项卡一</li>		<!--相当于页面载入就选中的样子 select为选中样式-->
            <li>   选项卡二</li>
        </ul>
        <div id="main">
            <div class="box">内容一</div>					<!--主要设定的是长宽-->
            <div class="hidden">内容二</div>				<!--调用display:none载入时候不显示-->
        </div>
    </div>

    事件：

<script type="text/javascript">
	window.οnlοad=function(){
		var Node=document.getElementsByTagName('li')
		var ShowDiv=document.getElementById('main').getElementsByTagName('div');
		for(var i=0;i<Node.length;i++)
		{
			Node[i].index=i;
			Node[i].οnmοusemοve=function()  
			{
				for(var j=0;j<Node.length;j++)
				{
					Node[j].className="";
					ShowDiv[j].className="hidden";
				}
				Node[this.index].className="select";
				ShowDiv[this.index].className="box";
			}
		}
		
		var dNode = document.getElementById('UserSelect').getElementsByTagName('li');
        var info = document.getElementById('select_info').getElementsByTagName('div');
        for (var i = 0; i < dNode.length; i++) {
            dNode[i].index = i;
            dNode[i].onmousemove = function () {
                for (var j = 0; j < length; j++) {
                    dNode[j].className = "";
                    info[j].className = "hide";
                }
                dNode[this.index].className = "select";
                info[this.index].className = "box";
            }
        }
	}
</script>

下载链接：https://download.csdn.net/download/qq_38967576/10482081