Tab选项卡切换

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>