Tab选项卡切换
2016-05-06 11:40
330 查看
Tab选项卡切换
基本代码
HTML代码:<div id="notice" class="notice"> <!-- 标题--> <div id="notice-tit" class="notice-tit"> <ul> <li><a href="#">公告</a></li> <li><a href="#">规则</a></li> <li><a href="#">论坛</a></li> <li><a href="#">安全</a></li> <li class="select"><a href="#">公益</a></li> </ul> </div> <!-- 内容--> <div id="notice-con" class="notice-con"> <div class="mod" style="display: none"> <ul> <li><a href="#">张勇:要玩快乐足球</a></li> <li><a href="#">阿里2000万驰援灾区!</a></li> <li><a href="#">旅游宝让你边玩边赚钱</a></li> <li><a href="#">多行跟进阿里信用贷款</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><a href="#"><span><a href="">[通知]</a></span>“滥发”即将换新</a></li> <li><a href="#"><span><a href="">[通知]</a></span>比特币严管啦!</a></li> <li><a href="#"><span><a href="">[通知]</a></span>禁发商品名录</a></li> <li><a href="#"><span><a href="">[通知]</a></span>商品属性限制</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><a href="#">个人信息要严管</a></li> <li><a href="#">个人信息要严管</a></li> <li><a href="#">个人信息要严管</a></li> <li><a href="#">个人信息要严管</a></li> </ul> </div> <div class="mod" style="display: none"> <ul> <li><a href="#">禁发商品名录</a></li> <li><a href="#">禁发商品名录</a></li> <li><a href="#">禁发商品名录</a></li> <li><a href="#">禁发商品名录</a></li> </ul> </div> <div class="mod" style="display: block"> <ul> <li><a href="#">商品属性限制</a></li> <li><a href="#">商品属性限制</a></li> <li><a href="#">商品属性限制</a></li> <li><a href="#">商品属性限制</a></li> </ul> </div> </div> </div>
css效果
*{ margin: 0; padding: 0; list-style: none; font-size: 12px; } .notice{ width: 298px; height: 98px; margin: 10px; border: 1px solid #eee; overflow: hidden; } .notice-tit{ height: 27px; position: relative; background: #f7f7f7; } .notice-tit ul { position: absolute; width: 301px;//边框重合 left: -1px; } .notice-tit ul li{ float: left; width: 58px; height: 26px; padding: 0 1px; line-height: 26px; text-align: center; overflow: hidden; background: #f7f7f7; border-bottom: 1px solid #eee; } /*li选中的样式*/ .notice-tit ul li.select { background: #fff; border-bottom: 1px solid #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; /*去除填充*/ padding: 0; font-weight: bolder; } /*.notice-tit ul li a{*/ /*display: block;*/ /*}*/ .notice ul li a:link, .notice-tit ul li a:visited{ text-decoration: none; color: #000; } /*鼠标滑过颜色的变化*/ .notice ul li a:hover{ color: #f90; } .notice-con .mod{ margin: 10px 10px 10px 19px; } .notice-con .mod ul { overflow: hidden; } .notice-con .mod ul li{ float: left; width: 134px; height: 25px; overflow: hidden; }
效果如下:
JS效果实现
当鼠标点击或者滑过时切换,JS代码如下:function $(id) { return typeof id === 'string' ? document.getElementById(id):id; } window.onload = function () { //获取鼠标滑过或点击的标签和要切换内容的元素 var titles = $('notice-tit').getElementsByTagName('li'); var divs = $('notice-con').getElementsByTagName('div'); //alert(titles.length); //alert(divs.length); if(titles.length != divs.length){ return; } //遍历titles下的所有的li for(var i=0; i < titles.length; i++){ titles[i].id = i; titles[i].onmouseover = function () { //alert(this.id); //清除所有li上的class for(var j=0; j < titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //设置当前为高亮显示 this.className = 'select'; divs[this.id].style.display = 'block'; } }
鼠标滑过延迟切换
window.onload = function () { //点击延迟加载 var index = 0; var timer = null; var titles = $('notice-tit').getElementsByTagName('li'); var divs = $('notice-con').getElementsByTagName('div'); if(titles.length != divs.length){ return; } //遍历titles下的所有的li for(var i=0; i < titles.length; i++){ titles[i].id = i; titles[i].onclick = function () { //用that这个变量来引用当前滑过的li var that = this; //如果存在准备执行的定时器,立即清除 if(timer){ clearTimeout(timer); timer = null; } timer = setTimeout(function () { //清除所有li上的class for(var j=0; j < titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //this当前属于window对象 titles[that.id].className = 'select'; divs[that.id].style.display = 'block'; },500); } } }
自动切换
//自动切换 window.onload = function () { //当前高亮显示的页面的索引 var index = 0; var timer = null; //获取所有的页签和要切换的内容 var lis = $('notice-tit').getElementsByTagName('li'); var divs = $('notice-con').getElementsByTagName('div'); //遍历每一个叶签给它们绑定事件 for(var i=0;i<lis.length;i++){ lis[i].onmouseover = function () { index = this.id; clearInterval(timer); changeOption(this.id); } //鼠标离开事件 lis[i].onmouseout = function () { //添加定时器,改变当前高亮的索引 timer = setInterval(autoPlay,2000); } } //添加定时器,改变当前高亮的索引 if(timer){ clearInterval(timer); timer = null; } timer = setInterval(autoPlay,2000); //自动播放 function autoPlay() { index++; if(index>=lis.length){ index = 0; } changeOption(index); } function changeOption(curIndex){ for(var j=0;j<lis.length;j++){ lis[j].className = ''; divs[j].style.display = 'none'; } //高亮显示 lis[curIndex].className = 'select'; divs[curIndex].style.display = 'block'; index = curIndex; } }
其它例子
折叠列表HTML&CSS <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; padding:0; font-size:13px; list-style:none;} .menu{width:210px; margin:50px auto; border:1px solid #ccc;} .menu p{height:25px; line-height:25px; font-weight:bold; background:#eee; border-bottom:1px solid #ccc; cursor:pointer; padding-left:5px;} .menu div ul{display:none;} .menu li{height:24px; line-height:24px; padding-left:5px;} </style> </head> <body> <div class="menu" id="menu"> <div> <p>Web前端</p> <ul style="display:block"> <li>JavaScript</li> <li>DIV+CSS</li> <li>jQuery</li> </ul> </div> <div> <p>后台脚本</p> <ul> <li>PHP</li> <li>ASP.net</li> <li>JSP</li> </ul> </div> <div> <p>前端框架</p> <ul> <li>Extjs</li> <li>Esspress</li> <li>YUI</li> </ul> </div> </div> </body> </html>
JS代码
<script type="text/javascript"> window.onload=function(){ // 将所有点击的标题和要显示隐藏的列表取出来 var menu = document.getElementById('menu'); var titles = menu.getElementsByTagName('p'); var uls = menu.getElementsByTagName('ul'); // 遍历所有要点击的标题且给它们添加索引及绑定事件 for(var i=0;i<titles.length;i++){ titles[i].id = i; titles[i].onclick=function(){ var ul = uls[this.id]; if(ul.style.display == 'block'){ ul.style.display = 'none'; }else{ ul.style.display = 'block'; } } } } </script>
焦点轮播图效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0; padding:0; list-style:none;} .wrap{height:170px; width:490px; margin:60px auto; overflow: hidden; position: relative; margin:100px auto;} .wrap ul{position:absolute;} .wrap ul li{height:170px;} .wrap ol{position:absolute; right:5px; bottom:10px;} .wrap ol li{height:20px; width: 20px; background:#ccc; border:solid 1px #666; margin-left:5px; color:#000; float:left; line-height:center; text-align:center; cursor:pointer;} .wrap ol .on{background:#E97305; color:#fff;} </style> <script type="text/javascript"> window.onload=function(){ var wrap=document.getElementById('wrap'), pic=document.getElementById('pic'), list=document.getElementById('list').getElementsByTagName('li'), index=0, timer=null; if(timer){ clearInterval(timer); timer = null; } timer = setInterval(autoPlay,2000); // 定义并调用自动播放函数 function autoPlay() { index++; if(index>=list.length){ index = 0; } changeOption(index); } // 定义图片切换函数 function changeOption(curIndex){ for(var i=0;i<list.length;i++){ list[i].className=''; } list[curIndex].className='on'; pic.style.top = -170*curIndex+'px'; index = curIndex; } // 鼠标划过整个容器时停止自动播放 wrap.onmouseover = function(){ if(timer){ clearInterval(timer); timer = null; } } // 鼠标离开整个容器时继续播放至下一张 wrap.onmouseout = function(){ timer = setInterval(autoPlay,2000); } // 遍历所有数字导航实现划过切换至对应的图片 for(var i=0;i<list.length;i++){ list[i].id = i; list[i].onmouseover=function() { changeOption(this.id); } } } </script> </head> <body> <div class="wrap" id='wrap'> <ul id="pic"> <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li> <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li> </ul> <ol id="list"> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> </div> </body> </html>
相关文章推荐
- c++第五次上机实验第二题
- Path Sum 路径和(注:同时包含得到各个路径的模板:两种不同表达形式的代码)
- 实例变量 定义在 @interface 和 @implementation 有何区别?
- Python 各进制间的转换
- 欢迎使用CSDN-markdown编辑器
- c++第5次实验
- 让UITableView的表头随着tableView一起滚动
- MVC简单用户登录授权认证
- ant生成war包的简单实现
- 易错小细节
- 利用node js快速模拟REST API
- win10隐藏图标后找不到怎么办?win10隐藏图标后如何找出来
- 动态获取UILabel的bounds
- 浅谈UML学习笔记之用例图
- C++第五次实验——项目二
- 剑指offer:数据流中的中位数
- JAVA中Singleton的用法
- JMeter使用技巧
- 【转】NSHashtable and NSMaptable
- PHP调用2个一排数据