div + css实现Tab菜单

我要个div+css实现Tab菜单,,最主要是简单,不要什么花样的!谢谢大家了!!... 我要个div + css实现Tab菜单,,最主要是简单,不要什么花样的!谢谢大家了!! 展开

 我来答

1个回答

#热议# 在购买新能源车时，要注意哪些？

mingxiao800
推荐于2016-09-22

知道答主

回答量：1

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

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


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

div + css实现Tab菜单

其他类似问题

为你推荐：