关闭

Tab滑动

293人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>本站自制TAB选项卡滑动门 站长学院 www.pigzz.com</title>
    <style type="text/css">
    *{ margin:0px; padding:0px;}
    #tabWarp{ width:400px; height:300px; border:1px solid #ccc; margin:10px auto;}
    #tabMenu{ width:400px; height:25px; overflow:hidden; border-bottom:1px solid #ccc; margin-top:5px;}
    #tabMenu ul li{ width:80px; float:left; list-style:none; font-size:12px; line-height:25px; height:25px; text-align:center; color:#0066CC; cursor:pointer; border-left:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc; margin:0px 5px;}
    #tabMenu ul li.curent{ font-size:13px; background:#FBF5E1; font-weight:bold; color:#FF6600;}
    #tabContent{ width:390px; height:360px; padding:5px; font-size:12px;}
    #tabContent .hide{ display:none;}
    </style>
    </head>
    <body>
    <h1 id="what"></h1>
    <div id="tabWarp">
    <div id="tabMenu">
    <ul>
    <li class="curent">中餐</li>
    <li>西餐</li>
    <li>亚洲菜</li>
    <li>河南菜</li>
    </ul>
    </div>
    <div id="tabContent">
    <div>
    <p>中餐的内容</p>
    </div>
    <div class="hide">
    <p>西餐的内容</p>
    </div>
    <div class="hide">
    <p>亚洲菜的内容</p>
    </div>
    <div class="hide">
    <p>河南菜的内容</p>
    </div>
    </div>
    </div>
    <script>
    function fgTab(tabNav,tabBody){
    var tabMenu=document.getElementById(tabNav);
    var tabTitle=tabMenu.getElementsByTagName('li');
    var tabContent=document.getElementById(tabBody);
    var tabBody=tabContent.getElementsByTagName('div');
    function switchTab(i){
    tabTitle[i].onmouseover=function(){
    for(j=0; j<tabTitle.length; j++){
    if(i==j){
    tabTitle[j].className='curent';
    tabBody[j].style.display="block";
    }else{
    tabTitle[j].className='';
    tabBody[j].style.display="none";
    }
    }
    document.getElementById('what').innerHTML = i+'<br/>'+out();
    }
    }
    for( i=0; i<tabTitle.length; i++){
    switchTab(i);
    }
    }
    function out(){
    return i + '<br/>'+j;
    }
    </script>
    <script>
    fgTab('tabMenu','tabContent');
    </script>
    </body>
    </html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    博客专栏
    个人资料
    • 访问:608798次
    • 积分:11358
    • 等级:
    • 排名:第1430名
    • 原创:455篇
    • 转载:542篇
    • 译文:3篇
    • 评论:36条
    文章分类
    最新评论