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>