原生js---tab标签页

最新推荐文章于 2022-05-09 08:53:21 发布

weixin_30882895

最新推荐文章于 2022-05-09 08:53:21 发布

阅读量114

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bingjiebeibei/p/9355272.html

版权

本文介绍了一种使用HTML和JavaScript实现的简单tab标签页切换效果。通过为不同的内容块设置显示与隐藏状态，实现标签页的内容切换。文章提供了完整的代码示例，包括HTML结构、CSS样式以及JavaScript交互逻辑。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
   <title>tab标签页</title>
   <meta charset="utf-8">
   <style type="text/css">
      ul{
         list-style-type: none;
         margin: 0;
         padding: 0;
      }
      ul li{
         float: left;
         margin-right: 10px;
      }
      #tab_con{
         clear: left;
         margin-top: 15px;
      }
      .active{
         background: #333;
         color: #fff;
      }
      .one{
         width: 100%;
         height: 200px;
         background: #f00;
      }
      .two{
         width: 100%;
         height: 200px;
         background: #0f0;
         display: none;
      }
      .three{
         width: 100%;
         height: 200px;
         background: #00f;
         display: none;
      }
   </style>
</head>
<body>
   <ul id="tab_nav">
      <li class="active">tab1</li>
      <li>tab2</li>
      <li>tab2</li>
   </ul>
   <div id="tab_con">
      <div class="one">内容1</div>
      <div class="two">内容2</div>
      <div class="three">内容3</div>
   </div>
</body>
<script type="text/javascript">
   //利用索引值进行传值
   var tab=document.getElementById('tab_nav').children;
   var con=document.getElementById('tab_con').children;
   for(var i=0;i<tab.length;i++){
      tab[i].index=i;
      tab[i].οnclick=function(){
         for(j=0;j<con.length;j++){
            con[j].style.display="none";
            tab[j].className="";
         }
         con[this.index].style.display="block";
         this.className="active";
      }
   }
</script>
</html>