彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 活动会议 > javascript css红色经典选项卡效果实现代码_javascr

javascript css红色经典选项卡效果实现代码_javascr

发布时间:2019-12-10 06:45编辑:活动会议浏览(189)

    本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下

    javascript css红色经典选项卡效果实现代码,css红色经典

    彩世界时时app,本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下

    效果图:

    彩世界开奖app苹果下载 1

    彩世界开奖app苹果下载,实现代码:

    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>无标题文档</title> 
    
    <style type="text/css"> 
    body{ font-size:12px;} 
    .sec,.sec1{ cursor:pointer;} 
    .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} 
    .sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} 
    div{ line-height:22px;} 
    </style> 
    
    <script language="javascript"> 
    function $(id){ 
    return document.getElementById(id); 
    } 
    function xxk(num,id,ii,iii) 
    { 
    //alert(ii); 
    var dq; 
    for(var i=1;i<=num;i++) 
    { 
      if(i==id){ 
     dq=$(ii+i).className='sec'; //当前选项 
     $(iii+i).style.display="block"; 
      } 
      else 
      { 
      dq=$(ii+i).className='sec1'; 
      $(iii+i).style.display="none"; 
      } 
    } 
    } 
    </script> 
    
    
    </head> 
    
    <body> 
    
    <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> 
     <tr> 
      <td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">选项卡1</td> 
      <td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">选项卡2</td> 
      <td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">选项卡3</td> 
      <td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">选项卡4</td> 
      <td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">选项卡5</td> 
     </tr> 
     <tr> 
      <td colspan="5" bgcolor="#FFFFFF"> 
    <div id="tt1">选项卡1月在上班</div> 
    <div id="tt2" style="display:none;">选项卡2月在上班</div> 
    <div id="tt3" style="display:none;">选项卡3月在上班</div> 
    <div id="tt4" style="display:none;">选项卡4月在上班</div> 
    <div id="tt5" style="display:none;">选项卡5月在上班</div> 
    </td> 
     </tr> 
    </table> 
    <br /> 
    <table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> 
     <tr> 
      <td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">选项卡1</td> 
      <td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">选项卡2</td> 
      <td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">选项卡3</td> 
      <td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">选项卡4</td> 
     </tr> 
     <tr> 
      <td colspan="4" bgcolor="#FFFFFF"> 
    <div id="tts1">选项卡1月在上班</div> 
    <div id="tts2" style="display:none;">选项卡2月在上班</div> 
    <div id="tts3" style="display:none;">选项卡3月在上班</div> 
    <div id="tts4" style="display:none;">选项卡4月在上班</div> 
    </td> 
     </tr> 
    </table> 
    
    
    </body> 
    </html> 
    

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    css红色经典选项卡效果实现代码,css红色经典 本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下 效...

    效果图:

    实现代码:

      无标题文档  body{ font-size:12px;} .sec,.sec1{ cursor:pointer;} .sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} .sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} div{ line-height:22px;}   function ${ return document.getElementById; } function xxk { //alert; var dq; for { if.className='sec'; //&#24403;&#21069;&#36873;&#39033; $.style.display="block"; } else { dq=$.className='sec1'; $.style.display="none"; } } }    
    

    选项卡1

    选项卡2

    选项卡3

    选项卡4

    选项卡5

    选项卡1月在上班

    选项卡2月在上班

    选项卡3月在上班

    本文由彩世界平台发布于活动会议,转载请注明出处:javascript css红色经典选项卡效果实现代码_javascr

    关键词: