做个简单的tab切换效果，分别于jquery和js操作

（1）jQuery操作

先看下效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        *{box-sizing:border-box;padding: 0;margin: 0}

        ul{width: 100%;height: 50px;text-align: center;margin: 10px 0;}

        ul li{list-style: none;height: 100%;width: 100px;

          line-height: 50px;text-align: center;background-color: #9c8b8b;

          margin: 0 6px;display: inline-block;cursor: pointer;}

        section{width: 600px;height: 300px;border: 1px solid red;margin: 100px auto;}

        #area{width: 400px;height: 200px;margin: 10px auto;border: 1px solid red;}

        .child{width: 100%;height: 100%;float: left;display: none;text-align: center;line-height: 200px;font-size: 20px;color: black;}

        .active{display: block}

        #area .child:nth-child(1){

          background-color: red;

        }

        #area .child:nth-child(2){

          background-color: green;

        }

        #area .child:nth-child(3){

          background-color: blue;

        }

        #area .child:nth-child(4){

          background-color: yellow;

        }

    </style>

</head>

<body>

<section>

  <ul>

    <li>1</li>

    <li>2</li>

    <li>3</li>

    <li>4</li>

  </ul>

  <div id="area">

    <div class="child active">

      内容一

    </div>

    <div class="child">

      内容二

    </div>

    <div class="child">

      内容三

    </div>

    <div class="child">

      内容四

    </div>

  </div>

</section>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<script>

    $(function(){

      $("ul li").on('click',function(){

        var index = $(this).index();

        $(".child").each(function() {

          if (index == $(this).index()) {

            $(this).siblings().removeClass('active');

            $(this).addClass('active');

          }

        })

      })

    })

</script>

</body>

</html>

（2）js操作

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

 padding: 0;

 margin: 0;

}

li{

 list-style: none;

 float:left;

}

#tabCon {

 clear: both;

}

#tabCon div {

 display:none;

}

#tabCon div.fdiv {

 display:block;

}

</style>

</head>

<body>

<div id="tanContainer">

   <div id="tab">

     <ul>

      <li>标题一</li>

      <li>标题二</li>

      <li>标题三</li>

      <li>标题四</li>

     </ul>

   </div>

   <div id="tabCon">

     <div class="fdiv">内容一</div>

     <div>内容二</div>

     <div>内容三</div>

     <div>内容四</div>

  </div>

</div>

</body>

<script>

var tabs=document.getElementById("tab").getElementsByTagName("li");

var divs=document.getElementById("tabCon").getElementsByTagName("div");

for(var i=0;i<tabs.length;i++){

  tabs[i].onclick=function(){

    change(this);

  }

}

function change(obj){

  for(var i=0;i<tabs.length;i++){

    console.log(tabs[i])

    if(tabs[i]==obj){

      divs[i].className="fdiv";

    }else{

      divs[i].className="";

    }

  }

}

</script>

</html>

.

tab切换案例的更多相关文章

  1. Angular——tab切换案例

    基本介绍 angular框架下的tab切换,相比较于之前的纯js写的代码,有一个很大的特点就是以数据为驱动,基本上不用搜索dom元素就可以实现效果 基本使用 (1)导航部分使用的是的状态使用的是ng- ...

  2. JS---DOM---tab切换案例实现---排他

    tab切换案例实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  3. WPF案例（－）模拟Windows7 Win+Tab切换

    原文:WPF案例(-)模拟Windows7 Win+Tab切换 一个使用Wpf模拟Windows7 Win+Tab页面切换的小程序,使用快捷键Ctrl+Down或Ctrl+Up在示例程序各个页面元素之 ...

  4. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  5. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  6. Js 实现tab切换效果

    今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的

  7. bootstrap tab切换如何让鼠标移动自动切换内容

    bootstrap集成了很多功能,比如nav-tabs组件,可以将相似的内容集中在一个区块中展示.bootstrap tab切换默认是要点击才会切换的,如何实现鼠标移动就自动切换呢?如下图所示,光标移 ...

  8. 原生JS实现tab切换--web前端开发

    tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...

  9. echarts tab 切换问题整理

    一.bootstrap tabs 解决方案 方式一 tab切换echarts无法正常显示 https://blog.csdn.net/cjs68/article/details/78072382 ta ...

随机推荐

  1. MVC中路由的一些内容详解

    使用路由的好处:1.能够根据系统需求,灵活的划分请求规则(不同模块请求的URL是不一样的)2.屏蔽物理路径,提高系统的安全性,以上情况是无法根据URL分析视图文件在站点目录中的位置3.有利于搜索引擎优 ...

  2. Filters.h各种信号恢复滤波器头文件

    这篇文章有部分原理:http://blog.csdn.net/u013467442/article/details/41125473 代码下载地址:http://read.pudn.com/downl ...

  3. java集合： List、Set、Map总结 + HashMap/Hashtable 差别

    List:(有序,能够反复)通过下标索引     ----ArrayList  可变数组,随机查找     ----LinkedList    链表,不论什么位置插入删除快     ----Vecto ...

  4. ECMAScript 对象类型

    ECMAScript:本地对象.内置对象.宿主对象 一.本地对象: 定义:ECMA-262(ECMAScript语言规范) 定义其为“独立于宿主环境的 ECMAScript 实现提供的对象”.它是由 ...

  5. WIZnet的网络产品怎样选型

    文章来源:成都浩然 我们在选用WIZnet的网络产品的时候.面对诸多的器件不知怎样选择,这里介绍一些方法以帮助project师高速准确地选择产品. WIZnet的产品有一个共同的特性.那就硬件TCPI ...

  6. 华为FusionSphere概述——计算资源、存储资源、网络资源的虚拟化，同时对这些虚拟资源进行集中调度和管理

    华为FusionSphere概述 FusionSphere是华为自主知识产权的云操作系统,集虚拟化平台和云管理特性于一身,让云计算平台建设和使用更加简捷,专门满足企业和运营商客户云计算的需求.华为云操 ...

  7. [luogu4735]最大异或和

    https://zybuluo.com/ysner/note/1238161 题面 给定一个初始长度为\(N\)的非负整数序列\(\{a\}\). 有\(m\)个操作,操作分为两种: 在序列末尾加一个 ...

  8. hadoop-Combiner作用用法

    文章来源http://blog.csdn.net/ipolaris/article/details/8723782 reduce的输入每个key所对应的value将是一大串1,但处理的文本很多时,这一 ...

  9. 一个不错的jquery插件模版

    pageplugin.js (function ($) { $.PagePlugin = function (obj, opt) { var options = $.extend({}, $.Page ...

  10. 4.28 QBXT模拟赛

    NOIP2016提高组模拟赛 ——By wangyurzee7 中文题目名称 迷妹 膜拜 换数游戏 英文题目与子目录名 fans mod game 可执行文件名 fans mod game 输入文件名 ...