直接进入主题,实现一个最基本入门的选项卡,采用HTML+CSS的方式制作,关于这个我觉得最核心的就是页面载入时候对ul标签下的Li元素添加事件,比如选中选项卡一的时候内容一显示,内容二display:none即不显示就好了;还有我觉得比较重要的要用Float属性,往左浮动。
(最终效果图)
首先上界面代码:
<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>
样式:
最开始时候运行:
(图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