zoukankan      html  css  js  c++  java

  • 简单实用TAB选项卡，支持单页面多个调用

    简单实用TAB选项卡，支持单页面多个调用

    鼠标滑过响应类型

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

    <title>简洁Tab</title>

    <style type="text/css">

    <!--

    body,div,ul,li{

     padding:0;

     text-align:center;

    }

    body{

     font:12px "宋体";

     text-align:center;

    }

    a:link{

     color:#00F;

     text-decoration:none;

    }

    a:visited {

     color: #00F;

     text-decoration:none;

    }

    a:hover {

     color: #c00;

     text-decoration:underline;

    }

    ul{ list-style:none;}

    #Tab1{

    460px;

    margin:0px;

    padding:0px;

    margin:0 auto;}

    #Tab2{

    576px;

    margin:0px;

    padding:0px;

    margin:0 auto;}

    .Menubox {

    100%;

    background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);

    height:28px;

    line-height:28px;

    }

    .Menubox ul{

    margin:0px;

    padding:0px;

    }

    .Menubox li{

     float:left;

     display:block;

     cursor:pointer;

     114px;

     text-align:center;

     color:#949694;

     font-weight:bold;

     }

    .Menubox li.hover{

     padding:0px;

     background:#fff;

     116px;

     border-left:1px solid #A8C29F;

     border-top:1px solid #A8C29F;

     border-right:1px solid #A8C29F;

     background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);

     color:#739242;

     font-weight:bold;

     height:27px;

    line-height:27px;

    }

    .Contentbox{

     clear:both;

     margin-top:0px;

     border:1px solid #A8C29F;

     border-top:none;

     height:181px;

     text-align:center;

     padding-top:8px;

    }

    -->

    </style>

    <script>

    <!--

    function setTab(name,cursel,n){

     for(i=1;i<=n;i++){

      var menu=document.getElementById(name+i);

      var con=document.getElementById("con_"+name+"_"+i);

      menu.className=i==cursel?"hover":"";

      con.style.display=i==cursel?"block":"none";

     }

    }

    //-->

    </script>

    </head>

    <body>

    <br><br>

    <div id="Tab1">

    <div class="Menubox">

    <ul>

       <li id="one1" onmouseover="setTab('one',1,4)"  class="hover">新闻1</li>

       <li id="one2" onmouseover="setTab('one',2,4)" >新闻2</li>

       <li id="one3" onmouseover="setTab('one',3,4)">新闻3</li>  

       <li id="one4" onmouseover="setTab('one',4,4)">新闻4</li>

    </ul>

    </div>

     <div class="Contentbox"> 

       <div id="con_one_1" class="hover">新闻列表1</div>

       <div id="con_one_2" style="display:none">新闻列表2</div>

       <div id="con_one_3" style="display:none">新闻列表3</div>

       <div id="con_one_4" style="display:none">新闻列表4</div>

     </div>

    </div>

    <br>

    <div id="Tab2">

    <div class="Menubox">

    <ul>

       <li id="two1" onmouseover="setTab('two',1,4)"  class="hover">新闻1</li>

       <li id="two2" onmouseover="setTab('two',2,4)" >新闻2</li>

       <li id="two3" onmouseover="setTab('two',3,4)">新闻3</li>  

       <li id="two4" onmouseover="setTab('two',4,4)">新闻4</li>

    </ul>

    </div>

     <div class="Contentbox"> 

       <div id="con_two_1" >新闻列表1</div>

       <div id="con_two_2" style="display:none">新闻列表2</div>

       <div id="con_two_3" style="display:none">新闻列表3</div>

       <div id="con_two_4" style="display:none">新闻列表4</div>

     </div>

    </div>

    </body>

    </html>

    




    鼠标点击响应
    




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

    <title>简洁Tab</title>

    <style type="text/css">

    <!--

    body,div,ul,li{

     padding:0;

     text-align:center;

    }

    body{

     font:12px "宋体";

     text-align:center;

    }

    a:link{

     color:#00F;

     text-decoration:none;

    }

    a:visited {

     color: #00F;

     text-decoration:none;

    }

    a:hover {

     color: #c00;

     text-decoration:underline;

    }

    ul{ list-style:none;}

    #Tab1{

    460px;

    margin:0px;

    padding:0px;

    margin:0 auto;}

    #Tab2{

    576px;

    margin:0px;

    padding:0px;

    margin:0 auto;}

    .Menubox {

    100%;

    background:url(http://www.hxcgw.com/bbs/upfile/20079299441652.gif);

    height:28px;

    line-height:28px;

    }

    .Menubox ul{

    margin:0px;

    padding:0px;

    }

    .Menubox li{

     float:left;

     display:block;

     cursor:pointer;

     114px;

     text-align:center;

     color:#949694;

     font-weight:bold;

     }

    .Menubox li.hover{

     padding:0px;

     background:#fff;

     116px;

     border-left:1px solid #A8C29F;

     border-top:1px solid #A8C29F;

     border-right:1px solid #A8C29F;

    background:url(http://www.hxcgw.com/bbs/upfile/200792994426548.gif);

     color:#739242;

     font-weight:bold;

     height:27px;

    line-height:27px;

    }

    .Contentbox{

     clear:both;

     margin-top:0px;

     border:1px solid #A8C29F;

     border-top:none;

     height:181px;

     text-align:center;

     padding-top:8px;

    }

    -->

    </style>

    <script>

    <!--

    function setTab(name,cursel,n){

     for(i=1;i<=n;i++){

      var menu=document.getElementById(name+i);

      var con=document.getElementById("con_"+name+"_"+i);

      menu.className=i==cursel?"hover":"";

      con.style.display=i==cursel?"block":"none";

     }

    }

    //-->

    </script>

    </head>

    <body>

    <br><br>

    <div id="Tab1">

    <div class="Menubox">

    <ul>

       <li id="one1" onclick="setTab('one',1,4)"  class="hover">新闻1</li>

       <li id="one2" onclick="setTab('one',2,4)" >新闻2</li>

       <li id="one3" onclick="setTab('one',3,4)">新闻3</li>  

       <li id="one4" onclick="setTab('one',4,4)">新闻4</li>

    </ul>

    </div>

     <div class="Contentbox"> 

       <div id="con_one_1" class="hover">新闻列表1</div>

       <div id="con_one_2" style="display:none">新闻列表2</div>

       <div id="con_one_3" style="display:none">新闻列表3</div>

       <div id="con_one_4" style="display:none">新闻列表4</div>

     </div>

    </div>

    <br>

    <div id="Tab2">

    <div class="Menubox">

    <ul>

       <li id="two1" onclick="setTab('two',1,4)"  class="hover">新闻1</li>

       <li id="two2" onclick="setTab('two',2,4)" >新闻2</li>

       <li id="two3" onclick="setTab('two',3,4)">新闻3</li>  

       <li id="two4" onclick="setTab('two',4,4)">新闻4</li>

    </ul>

    </div>

     <div class="Contentbox"> 

       <div id="con_two_1" >新闻列表1</div>

       <div id="con_two_2" style="display:none">新闻列表2</div>

       <div id="con_two_3" style="display:none">新闻列表3</div>

       <div id="con_two_4" style="display:none">新闻列表4</div>

     </div>

    </div>

    </body>

    </html>
    

    
    
                
    
                
              
    • 
              
    
              
  • 

                相关阅读:
    
                
                  qt捕鱼达人
                    
    linux通过源码安装gdb
                    
    打造简易http服务器
                    
    linux缓存同步
                    
    NOI之后的碎碎念 
                    
    Validate至少有一个不能为空
                    
    IOI 2020 集训队作业
                    
    P6033 [NOIP2004 提高组] 合并果子 加强版 题解
                    
    P3017 [USACO11MAR]Brownie Slicing G 题解
                    
    LOJ #145. DFS 序 2 题解
                    
                        
              
    • 
              
    
              
  • 
                原文地址：https://www.cnblogs.com/findw/p/1765234.html
              
    • 

            

          



          
          

            

            

          

        

      

      



      

      

        

          Copyright © 2011-2022 走看看