Tab選項卡點擊 滑動效果js實現

來源:互聯網
上載者:User

標籤:func   absolute   .net   .class   win   strong   tab選項卡   切換   not   

html部分代碼:

 [html] 

 
<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">      <title></title>      <link rel="stylesheet" type="text/css" href="css/style.css">      <script type="text/javascript" src="js/script.js"></script>  </head>  <body>  <div id="notice" class="notice">      <div class="notice-tit" id="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="#">張勇:玩快樂足球</a></li>                  <li><a href="#">張勇:玩快樂足球</a></li>                  <li><a href="#">張勇:玩快樂足球</a></li>              </ul>          </div>          <div class="mod" style="display: none;">              <ul>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:要玩快樂足球</a></li>              </ul>          </div>          <div class="mod" style="display: none;">              <ul>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><a href="#">張勇:玩快樂足球</a></li>                  <li><span>[<a href="#">通知</a>]</span><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>  </body>  </html>  

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-color: #f7f7f7;}.notice-tit ul{    position: absolute;    width: 301px;    left: -1px;}.notice-tit ul li{    float: left;    width: 58px;    height: 26px;    text-align: center;    line-height: 26px;    overflow: hidden;    padding: 0 1px;    background: #f7f7f7;    border-bottom: 1px solid #eee;}.notice-tit ul li.select{    background: #fff;    border-bottom-color: #fff;    border-left: 1px solid #eee;    border-right: 1px solid #eee;    padding: 0;    font-weight: bolder;}.notice li a:link,.notice-tit li a:visited{    text-decoration: none;    color: #000;}.notice li a:hover{    color: #f90;}.notice-con .mod{    margin: 10px 10px 10px 19px;}.notice-con .mod ul li{    float: left;    width: 134px;    height: 25;    overflow: hidden;}

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(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(){            for(var j=0;j<titles.length;j++)            {                //清除所有li上的class                titles[j].className=‘‘;                divs[j].style.display = ‘none‘;            }            //設定當前為高亮顯示            this.className = ‘select‘;            divs[this.id].style.display = ‘block‘;        }    }}

  


效果示範:

 

Tab選項卡點擊 滑動效果js實現

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.