css tab的製作

來源:互聯網
上載者:User
需要再加上JS進入控制。具體代碼如下,JS的功能就是用來修改CSS中的display屬性。下面的代碼只是做一些簡單的原理示範,你可以跟據你自己的需要進行修改。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT="">  <style>  .tabnav ul{margin:0;padding:0;list-style:none;}  .tabnav li{padding:5 10px;border:1px solid red;float:left;}  .tabid {border:1px solid #000;clear:both;}  </style>  <script language='javascript'>  function tab(n){ var tabnav="tab"+n; var tabid="tabid"+n; cleardisplay(); document.getElementById(tabid).style.display="block";  }  function cleardisplay(){ for (i=1;i<3;i++) {  var cleartabid="tabid"+i;  document.getElementById(cleartabid).style.display="none"; }  }  </script> </HEAD> <BODY> <div>  <div class='tabnav'> <ul>  <li id='tab1' onclick='tab(1)'>TAB1</li>  <li id='tab2' onclick='tab(2)'>TAB2</li> </ul>  </div>  <div id='tabid1' class='tabid'>tab1</div>  <div id='tabid2' class='tabid' style='display:none;'>tab2</div>  </div> </BODY></HTML>
相關文章

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.