做个简单的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. Windows下擴展ubuntu虛擬機的分區大小

    在虛擬分區上安裝ubuntu,8G的分区不够用,不願意重装,增加VM分区吧!先备份虛擬硬盤文件 VMWARE自带的工具:找到vmware安装目录下vmware-vdiskmanager.exe,双击無 ...

  2. iOS8開始默认语言有变化

    [问题] 測试组发现APP在iOS8及以上系统设备上,语言设置为我们不支持的小语种时.APP没有使用默认的英文,而是选择了上一次设置的语言. [分析] 经过研究发现,在iOS8系统開始,在设备语言设置 ...

  3. C++对象内存分布(3) - 菱形继承(virtual)

    1.前言 本篇文章的全部代码样例.假设是windows上编译执行.则使用的是visual studio 2013.假设是RHEL6.5平台(linux kernal: 2.6.32-431.el6.i ...

  4. Android SwipeToDismiss:左滑/右滑删除ListView条目Item

     <Android SwipeToDismiss:左右滑动删除ListView条目Item> Android的SwipeToDismiss是github上一个第三方开源框架(githu ...

  5. git项目创建

    1.在gitserver上创建git项目如图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill ...

  6. 配置hadoop集群一

    花了1天时间最终把环境搭建好了.整理了一下,希望对想学习hadoop的有所帮助. 资料下载:http://pan.baidu.com/s/1kTupgkn 包括了linux虚拟机.jdk, hadoo ...

  7. CodePlus 2017 12 月赛

    这场比赛跟个zz一样 div1卡在了同余方程上 心态崩了去做div2 然后被T1搞崩了 T1: 大模拟 比较像配平方程式 思路: 但是未知物质每种元素系数不能≥10 且不能为空 (如CO2+?=CO2 ...

  8. Windows7安装SQLServer 2008图解

    Windows7安装SQL Server 2008图解        这几天因为需要,一直想安装SQL Server 2008来作为Web后台的数据库进行些实验,但总是没有时间,今天终于有时间了,便安 ...

  9. 对腾讯云服务器linux系统进行分区格式化操作

  10. 搭建Git服务器(转载)

    转自:http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137583770360 ...