在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js、jQuery如何来写一些基本的选项卡

话不多说,先给各位看一下功能图:

                

好了,下边开始写代码了:

HTML代码:

<ul>
<li class="click">red</li>
<li>blue</li>
<li>yellow</li>
</ul>
<div class="box">
<div class="show"></div>
<div></div>
<div></div>
</div>

CSS代码:

*{
margin:;
padding:;
}
ul{
overflow: hidden;
/*注意父级元素塌陷,详情见博客*/
}
ul li{
width: 100px;
height: 30px;
float: left;
border: 1px solid #000;
list-style: none;
border-right: none;
text-align: center;
line-height: 30px;
cursor: pointer;
}
ul li:last-child{
border-right: 1px solid #000000;
}
.box{
position: relative;
}
.box div{
width: 304px;
height: 300px;
position: absolute;
display: none;
}
.box div:first-child{
background-color: red;
}
.box div:nth-child(2){
background-color: blue;
}
.box div:last-child{
background-color: yellow;
}
.box .show{
display: block;
}
.box .hide{
display: none;
}
.click{
background-color: #ccc;
}

基本样式的设置

原生JS写法:

var liAll = document.querySelectorAll('li');//获取要操作的元素
var divAll = document.querySelectorAll('.box div');//获取被操作的跟随元素
for (var i = 0;i<liAll.length;i++) { //for循环为每一个元素添加点击事件
liAll[i].index = i; //作用域的问题,如果for循环使用let声明,则不需要该行代码
liAll[i].onclick = function () {
for (var j = 0;j<liAll.length;j++) {
liAll[j].className = "";//将所有被操作的元素的背景色消失
divAll[j].className = "hide";//将所有被操作的元素全部隐藏
}
this.className = "click";//当前被点击的元素背景色改变
divAll[this.index].className = "show";//将所有被操作的元素跟随显示
}
}

jQuery写法:

引入jQuery文件 网址:https://www.bootcdn.cn/jquery/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
$("li").each(function  (index , ele) {//each循环遍历。得到所有的li  index代表li的下表,ele元素
$(this).click(function () {//$(this) 表示当前点击的元素
$(this).addClass("click");
$(this).siblings().removeClass("click");
$(".box div:eq("+index+")").css({"display":"block"}); //eq 根据each循环得出index的所引值 取对应的div显示
$(".box div:eq("+index+")").siblings().css({"display":"none"}); //对应的div隐藏
});
});

源代码下载地址:https://github.com/Mere-scholar/tab

如果您有看不明白的地方,可以留言,咱们共同交流!

前端知识更新的很快,继续努力吧!

原生js、jQuery实现选项卡功能的更多相关文章

  1. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  2. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  3. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 原生js实现tab选项卡

    1.html部分 <body>        <div id="tab">            <div class="tab_menu& ...

  5. 标签页(tab)切换的原生js,jquery和bootstrap实现

    概述 这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容 标签页(tab)切换的原生js实现 标签页(ta ...

  6. 瀑布流的三种实现方式(原生js+jquery+css3)

    前言 项目需求要弄个瀑布流的页面,用的是waterfall这个插件,感觉还是可以的,项目赶就没自己的动手写.最近闲来没事,就自己写个.大致思路理清楚,还是挺好实现的... 原生javascript版 ...

  7. 原生JS实现百度搜索功能

    今天呢给大家分享一下自己用原生JS做的一个百度搜索功能,下面上代码: <!DOCTYPE html> <html> <head> <meta charset= ...

  8. 原生js实现vue组件功能

    在如今VUE盛行的情况下,我们一直在惊叹于VUE的组件的功能,却不知道,原生js早就已经支持了这个功能. 最近在公开课学到的,js还有很多很多需要探索学习. 下面是一个简单的例子 <!DOCTY ...

  9. 原生JS实现滑动验证功能

    一般很多网站都有滑动验证的功能,简单滑动验证的原理如下图所示: 主要理解思想就行 图中的代码可能和实际写的有所不同 HTML和CSS也可根据仔细的喜好就行修改 完整代码: <!DOCTYPE h ...

随机推荐

  1. 范围for、new内存动态分配、nullptr

    一.范围for语句:用于遍历一个序列 ,,,,}; for(auto &x : v) // 省了拷贝的动作,提高了系统效率 { cout << x << endl; } ...

  2. 2019.2.14 t2 程序调试

    代码: #include <cstdio> #include <iostream> #include <cstring> #include <algorith ...

  3. Luogu P1886 滑动窗口

    P1886 滑动窗口 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口.现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的最大值和最小值. 例如: The a ...

  4. C#集合之栈

    栈(Stack)和队列是非常类似的一个容器,只是栈是一个后进先出(LIFO)的容器. 栈用Push()方法在栈中添加元素,用Pop()方法获取最近添加的一个元素: Stack<T>与Que ...

  5. 6. Javscript学习笔记——BOM

    6. BOM 6.1 widow对象 全局作用域: window是浏览器的一个实例 window对象同时扮演着ECMAScript中的Global对象的角色,因此所有在全局作用域中声明的变量.函数都会 ...

  6. http请求全过程

    第一步:浏览器生成http请求信息(第五层) 1.分解url 当用户输入网址时,浏览器会以一定的规则分解网址, 以 http://www.cemabenteng.com/dir/index.html ...

  7. for、while、do while 3种循环异同点

    for (; ; ){ 循环体} while(循环条件){ 循环体} do{ 循环体}while(循环条件); 执行顺序不同: for循环和while循环:先判断条件为true时,然后再执行 do w ...

  8. 使用maven构建多模块项目_记录

    参照孤傲苍狼的博客:https://www.cnblogs.com/xdp-gacl/p/4242221.html 备注:博客中的生成语句,适用于maven3.0.5以上,若为3.0.5以下,则将cr ...

  9. jmeter调试脚本之用户自定义变量

    一.用户自定义的变量 用户自定义变量,设置变量名.变量值,就引用变量名执行操作 名称:用户定义变量的描述性名称,显示在左边节点上,并用于命名事务 注释:用户定义变量的注释信息,非必填项 变量名称:定义 ...

  10. Python对日期进行格式化

    Python对日期进行格式化 把当前时间输出为2017-04-07 19:00:00.进入python交互命令行输入: > import datetime > currtime = dat ...