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下的所有的lifor(var i=0; i < titles.length; i++){titles[i].id = i;titles[i].onmouseover = function () {//alert(this.id);//清除所有li上的classfor(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下的所有的lifor(var i=0; i < titles.length; i++){titles[i].id = i;titles[i].onclick = function () {//用that这个变量来引用当前滑过的livar that = this;//如果存在准备执行的定时器，立即清除if(timer){clearTimeout(timer);timer = null;}timer = setTimeout(function () {//清除所有li上的classfor(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>