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;
}

效果如下：
Tab选项卡切换

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>

秒客网

Tab选项卡切换

Tab选项卡切换

基本代码

JS效果实现

其它例子

相关文章