html5新特性实现tab选项卡切换

之前学习了html,以及css,写后端也有一段时间了,现在把更多的精力放在了前端,那么,就从html5以及css3开始吧~~~,今天主要是实现了tab选项卡切换,之前也写过,现在用html5获取元素的新方法实现了一下,话不多说,代码如下

html代码

分析代码可以知道,选项卡的class为active的时候,选项卡就被选中,当内容section的style属性为display:block时,内容就被选中

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      background-color: #F7F7F7;
    }

    .tabs {
      width: 400px;
      margin: 30px auto;
      background-color: #FFF;
      border: 1px solid #C0DCC0;
      box-sizing: border-box;
    }

    .tabs nav {
      height: 40px;
      text-align: center;
      line-height: 40px;
      overflow: hidden;
      background-color: #C0DCC0;
      /* 伸缩盒模型 */
      display: flex;
    }

    nav a {
      display: block;
      width: 100px;
      border-right: 1px solid #FFF;
      color: #000;
      text-decoration: none;
    }

    nav a:last-child {
      border-right: none;
    }

    nav a.active {
      background-color: #9BAF9B;
    }

    .cont {
      overflow: hidden;
      display: none;
    }

    .cont ol {
      line-height: 30px;
    }
  </style>

</head>

<body>
  <div class="tabs">
    <nav>
      <a href="javascript:;" data-cont="local"  class="active">国内新闻</a>
      <a href="javascript:;" data-cont="global" >国际新闻</a>
      <a href="javascript:;" data-cont="sports" >体育新闻</a>
      <a href="javascript:;" data-cont="funny">娱乐新闻</a>
    </nav>
    <section class="cont" id="local" style="display:block">
      <ol>
        <li>国内新闻</li>
        <li>禽流感在感在广1处继续蔓延,温家宝指示</li>
        <li>南方大旱,农作物减产绝收面积上亩</li>
        <li>猪流感在广在全国暴发</li>
        <li>禽流感在全国多处继续蔓延,温家宝指示</li>
        <li>南方大旱,农作物减产绝收面积上亩</li>
        <li>猪流感在广东群体性暴发</li>
      </ol>
    </section>
    <section class="cont" id="global" >
      <ol>
        <li>国际新闻</li>
        <li>禽流感次发生蔓延,温家宝指示</li>
        <li>南方大旱,农作物减产绝收面积上亩</li>
        <li>猪流感在广减产绝收发</li>
        <li>禽流感在全国多作物减产绝收面积上亩</li>
        <li>猪流感在广东群体性暴发</li>
      </ol>
    </section>
    <section class="cont" id="sports">
      <ol>
        <li>体育新闻</li>
        <li>禽流感在全国多处农作物农延,温家宝指示</li>
        <li>南方大旱,农作物减产绝收面积上亩</li>
        <li>猪流感在广东群体性暴发</li>
        <li>禽流感在全农作物继续蔓延,温家宝指示</li>
        <li>南方大农作物减产绝收面积上亩</li>
        <li>猪流感在广东群体性暴发</li>
      </ol>
    </section>
    <section class="cont" id="funny">
      <ol>
        <li>娱乐新闻</li>
        <li>禽流感在全国物农延,温家宝指示</li>
        <li>南方大旱,农作物减产绝收面积上亩</li>
        <li>猪流感在广东群体性暴发</li>
        <li>禽流感在全农作物继续蔓延,温家宝指示</li>
        <li>猪流感在广东群体性暴发</li>
      </ol>
    </section>
  </div>

js代码

内容卡指内容,tab卡指点击的选项

<script>
  <!--document.querySelectorAll获取所有的a标签-->
  var aArr=document.querySelectorAll('a');
  <!--循环遍历-->
  for(var i=0;i<aArr.length;i++){
  <!--给每个获取到的元素添加点击事件-->
      aArr[i].onclick=function(){
      <!--获取当前激活的tab选项卡-->
         var active=document.querySelector(".active");
         <!--移除之前的选项卡激活属性-->
         active.classList.remove("active");
         <!--给当前点击的选项卡添加激活属性-->
         this.classList.add("active");
         <!--获取当前的section标签id名字-->
         var name=this.getAttribute("data-cont");
         <!--根据获取到的名字获取当前的内容卡-->
         var section=document.getElementById(name);
         <!--获取所有class为cont的元素,并循环遍历,取消所有内容卡的样式-->
         var cont = document.getElementsByClassName("cont");
         for(var i=0;i<cont.length;i++){
          cont[i].style.display="none";

         }
         <!--激活当前内容卡的样式-->
         section.style.display="block";


      }
  }
</script>

总结

排它思想

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

溶解效果

17670
来自专栏HT

透过WebGL 3D看动画Easing函数本质

50年前的这个月诞生了BASIC这门计算机语言,回想起自己喜欢上图形界面这行,还得归功于当年在win98下用QBASIC照葫芦画瓢敲了一段绘制奥运五环的代码,当...

227100
来自专栏华章科技

PPT装逼指南

虽然不是所有人都有大型演讲的机会,但混迹职场Presentation谁都会轮到几次吧。

16330
来自专栏Java与Android技术栈

Java实现图片的滤镜效果滤镜实现总结

在移动端或者在web开发时处理图片都是一件麻烦的事儿。我调研过很多library,特别是在移动端处理图片时动不动都需要使用 C++ 或者 OpenCV。这对于 ...

24410
来自专栏数据小魔方

PPT手绘利器——布尔运算

今天给大家介绍PPT里一个隐藏的强大功能——布尔运算! 布尔运算 ▽ 别被名字吓着了 其实就是形状与形状之间的交、并、补运算 高中时数学课上都学过集合中的交集、...

358110
来自专栏算法+

自动红眼移除算法 附c++完整代码

“红眼”一般是指在人物摄影时,当闪光灯照射到人眼的时候,瞳孔放大而产生的视网膜泛红现象。

552130
来自专栏逍遥剑客的游戏开发

动画系统的一些功能

23350
来自专栏糊一笑

那些年下过的大雨

想了解一下用纯CSS和JS怎么实现一段下雨的动画,于是去CodePen上面搜了一下,发现了很多很有意思的东西。有空可以常去上面逛逛,在对技术产生敬畏的同时也能学...

36450
来自专栏逍遥剑客的游戏开发

水下效果

21340
来自专栏IT平头哥联盟

Canvas一笔一笔,画出一辆会跑车

  灵感来源于前些天捡到钱了,就想着是时候给自己买辆车了,工作这么多年了应该对自己好一点,在网上搜索了一下看到这个车型。其实几年前是买过一辆的,但是不到一个月就...

25900

扫码关注云+社区

领取腾讯云代金券