JavaScript原生选项卡制作附新浪选项卡案例

来源：互联网发布：windows of the mind 编辑：程序博客网时间：2024/05/16 08:48

总结一下通常的小选项卡的编写过程.

HTML结构代码：

<!--结构方面--><body><div id="box"><ul id="title"><li class="active">新闻</li><li>首页</li><li>政治</li><li>时事</li></ul><div style="display: block;">新闻</div><div>首页</div><div>政治</div><div>时事</div></div></body>

我用一个大盒子包囊着一个ul以及四个div 并且给li设置独特的样式让li刚开始时有一个是独特的. 其余box里面的四个div 是对应上面作为按钮的li的.

CSS样式代码：

<style type="text/css">*{margin: 0;padding: 0; list-style: none;}#box{width:322px;height:360px; border:1px solid pink; box-sizing: border-box; margin: 0 auto;  }#title{width:320; height: 40px; border-bottom:2px solid pink;box-sizing: border-box; }#title li{height: 38px; padding: 0px 23px; border :1px solid red; font-size: 16px；font-weight:微软雅黑; line-height: 38px; text-align: center;float: left; cursor: pointer; }#box div{display: none; width: 320px; height: 320px; font-size: 60px;font-family:"microsoft yahei"; text-align: center; line-height: 320px;text-shadow: 1px 1px 8px aqua; color: pink;}.active{background:plum;}</style>

先清空所有样式的外边距以及内边距包括所有无序列表前面的小序号. 然后给大盒子box设置宽高居中.以及边框.<以及一系列的操作/代码如上>

/*必须要有的属性是*/1.#box的宽高以及溢出隐藏2.设置#box里面的所有div隐藏3.设置当点击li时起作用的样式

JavaScript代码部分:

<!--javascript代码部分--><script type="text/javascript">window.onload=function (){                          //页面加载完执行右方函数var oBox=document.getElementById('box');//找到最大的盒子var oTit  =document.getElementById('title');    //找到ulvar aDiv =oBox.getElementsByTagName('div');//通过标签名得到所有box里面的divvar aBtn =oTit.getElementsByTagName('li');//通过标签名得到所有ul里面的lifor(var i=0;i<aBtn.length;i++){                 //for循环遍历所有的aBtn <按钮>既所有的liaBtn[i].index=i;//给后期aDiv制作索引index<自定义的索引 可以是其它的> 具体意思是aBtn的[下标]属性index是当前的i[下标]aBtn[i].onclick=function (){//鼠标单击事件 当鼠标点击按钮aBtn的时候for(var j=0;j<aBtn.length;j++){//再给aBtn一个循环 <作用是每次执行下方的代码块时 先清空原有的>aBtn[j].className='';//让所有的aBtn每次点击前清空上次执行的样式aDiv[j].style.display='none';       //让所有的div每次点击时清空上次显示的那块内容}this.className='active';//当前的css样式等于active<点击时显示的样式>aDiv[this.index].style.display='block'; //aDiv[当前的.属性/索引]的样式为显示};}};</script>

下面是所有的代码整合

<!DOCTYPE html><html><head><meta charset="utf-8"><title>选项卡</title><!--css样式部分--><style type="text/css">*{margin: 0;padding: 0; list-style: none;}#box{width:322px;height:360px; border:1px solid pink; box-sizing: border-box; margin: 0 auto;  }#title{width:320; height: 40px; border-bottom:2px solid pink;box-sizing: border-box; }#title li{height: 38px; padding: 0px 23px; border :1px solid red; font-size: 16px；font-weight:微软雅黑; line-height: 38px; text-align: center;float: left; cursor: pointer; }#box div{display: none; width: 320px; height: 320px; font-size: 60px;font-family:"microsoft yahei"; text-align: center; line-height: 320px;text-shadow: 1px 1px 8px aqua; color: pink;}.active{background:plum;}</style><!--javascript代码部分--><script type="text/javascript">window.onload=function (){                          //页面加载完执行右方函数var oBox=document.getElementById('box');//找到最大的盒子var oTit  =document.getElementById('title');    //找到ulvar aDiv =oBox.getElementsByTagName('div');//通过标签名得到所有box里面的divvar aBtn =oTit.getElementsByTagName('li');//通过标签名得到所有ul里面的lifor(var i=0;i<aBtn.length;i++){                 //for循环遍历所有的aBtn <按钮>既所有的liaBtn[i].index=i;//给后期aDiv制作索引index<自定义的索引 可以是其它的> 具体意思是aBtn的[下标]属性index是当前的i[下标]aBtn[i].onclick=function (){//鼠标单击事件 当鼠标点击按钮aBtn的时候for(var j=0;j<aBtn.length;j++){//再给aBtn一个循环 <作用是每次执行下方的代码块时 先清空原有的>aBtn[j].className='';//让所有的aBtn每次点击前清空上次执行的样式aDiv[j].style.display='none';       //让所有的div每次点击时清空上次显示的那块内容}this.className='active';//当前的css样式等于active<点击时显示的样式>aDiv[this.index].style.display='block'; //aDiv[当前的.属性/索引]的样式为显示};}};</script></head><!--结构方面--><body><div id="box"><ul id="title"><li class="active">新闻</li><li>首页</li><li>政治</li><li>时事</li></ul><div style="display: block;">新闻</div><div>首页</div><div>政治</div><div>时事</div></div></body></html>

下面是新浪当下的一个选项卡效果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>新浪选项卡</title><style type="text/css">*{margin: 0; padding: 0; list-style: none;}body{background: paleturquoise;}.box{width: 360px; height: 270px; margin: 0 auto; background:white;}.title{width: 360px; height: 36px; background: url(img/bg.png)no-repeat;}.title li{color: #000; float: left; padding: 0 13px; font-family:"microsoft yahei" ; font-size: 15px; text-align: center; line-height: 36px; height: 36px; box-sizing: border-box; cursor:pointer;}.title li:nth-child(1){border-left:none ;}.title li a{color: #000; text-decoration: none;}.title li a:hover{color: #ff8400;}.active{border-right: 1px solid #d8e0d3; border-left: 1px solid #d8e0d3; border-top: 3px solid #fa8706; background: white;}.con{width: 360px; height: 234px; display: none; text-align: center; line-height: 234px; font-size: 40px; font-family: "microsoft yahei"; text-shadow: 2px 2px 8px #7FFFD4;}</style><script type="text/javascript">window.onload=function (){var oTitle=document.getElementById('title')var aBtn=oTitle.getElementsByTagName('li');var oBox=document.getElementById('box');var aDiv=oBox.getElementsByTagName('div');for(var i=0;i<aBtn.length;i++){aBtn[i].index=i;aBtn[i].onmouseover=function (){      //bugfor(var j=0;j<aBtn.length;j++){aBtn[j].className='';aDiv[j].style.display='none';}this.className='active';aDiv[this.index].style.display='block';};}};</script></head><body><div id="box" class="box"><ul id="title" class="title"><li class="active"><a href="#">图片</a></li><li><a href="#">专栏</a></li><li><a href="#">热点</a></li></ul><div class="con" style="display: block;">图片</div><div class="con">专栏</div><div class="con">热点</div></div></body></html>

周秦卿

1 0