css tab的制作

最新推荐文章于 2021-08-03 20:30:48 发布

原创最新推荐文章于 2021-08-03 20:30:48 发布 · 488 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #generator #class #function #div #html

本文介绍了一种使用JavaScript控制元素显示和隐藏的方法。通过切换不同ID对应的div元素的display属性来实现标签页效果。该方法适用于简单的网页交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要再加上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>