JavaScript实现简易tab栏切换内容栏
本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码，供大家参考，具体内容如下
html+css部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 初始化css，因为有默认边距
*{ margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}
ol,ul{ list-style:none;}
img,fieldset{ border:0 none; display:block;} */
div,ul,li{
box-sizing: border-box;
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
}
#nav{
width: 450px;
height: 400px;
margin: 100px auto;/*左右居中*/
background-color: pink;
padding: 0;
font-size: 14px;
}
li{
float: left;
width: 150px;
height: 30px;
text-align: center;
line-height: 0.6rem;
border: 0.02rem solid #ccc;
}
.content{
clear: both;
position: relative;
}
.content div{
width: 450px;
height: 370px;
position: absolute;
display: none;
}
.tab .choose{
background-color: skyblue;
}
.content .current{
display: block;
}
</style>
<script src="jQuery.mini.js"></script>
</head>
<body>
<div id="nav">
<div class="tab">
<ul>
<li class="choose" ><a href="#" > 1</a></li>
<li><a href="#" >2</a></li>
<li><a href="#" >3</a></li>
</ul>
</div>
<div class="content">
<div class="current">1</div>
<div>2</div>
<div>3</div>
</div>
</div>
</body>
</html>
原生js代码
var lis = document.querySelectorAll('li');
var divs = document.querySelector('.content').querySelectorAll('div');
for(var i=0 ; i<lis.length ; i++){
lis[i].setAttribute('dateIndex',i);//设置每一个li的index，方便后面锁定内容栏
lis[i].addEventListener('click',function(){
for(var j=0 ; j<lis.length ; j++){
lis[j].className = '';//将所有的li的样式设置为空
}
this.className = 'choose';//设置当前点击的li的样式（排他）
var index = this.getAttribute('dateIndex');//获取当前li的index
// console.log(index);
for(var j=0 ; j<lis.length ; j++){
divs[j].className = '';//排他
// lis[i].className = 'choose';
}
divs[index].className = 'current';
})
}
## jQuery方法
```javascript
//jQuer方法
$(function(){
$("li").click(function(){
$(this).addClass("choose");//为当前点击的li添加样式
$(this).siblings("li").removeClass("choose");//它的兄弟元素消除样式（排他）
var index = $(this).index();//获取当前点击的li的index
$(".content div").eq(index).show().siblings("div").hide();
//通过index获取到相对应的内容框，通过show()显示出来，在选取它的兄弟元素隐藏,分解======》
//$(".content div").eq(index).show()；
// $(".content div").eq(index).siblings("div").hide()
})
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript TAB栏切换效果的示例
代码实现: <!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&quo
-
JavaScript实现Tab栏切换特效
这里分享一个前端必会的案例,是一个Tab栏的切换效果,除了Tab栏本身会被点击切换之外,Tab本身也决定着其下方的内容板块的显示. 运行效果展示: 如上图所示,其实就是点击上方的Tab栏然后Tab栏本身的样式会被修改,然后其下方的内容块也会跟着显示对应的内容.这样的效果以及功能在前端的应用是非常广泛的,所以这可以说是前端必会了.话不多说下面先上代码: (这里就不上CSS样式代码了,个人根据需求进行设置即可,li用float布局就好) HTML的结构: <div class="tab&quo
-
JavaScript实现tab栏切换效果
本文实例为大家分享了JavaScript实现tab栏切换效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
-
JavaScript实现tab栏切换的效果
tab栏:点击不同的标签,显示不同的内容,被点击的标签样式发生改变(突出选中的是哪一个) 实现思路: 1.将tab栏分为上下两部分,上面是导航列表,下面是各部分对应的内容.把标签和内容都写出来,内容按照标签顺序依次顺着写,给标签都添加自定义属性- - -index,属性值从0开始,依次增加1 2.首先实现上面的效果,点击后样式切换,被点击的字体颜色.背景颜色改变等: ①css定义一个类eg:current,里面定义改变后的样式,先给第一个标签写一个该类名,其他的不写类名, ②js获取所有标签元素
-
JavaScript实现简易tab栏切换案例
本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码,供大家参考,具体内容如下 1. tab栏-案例1 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想: 1).所有元素全部清除样式(干掉其他人) 2).给当前元素设置样式 (留下我自己) 3).注意顺序不能颠倒,首先干掉其他人,再设置自己 我的思路: 代码实现: <!DOCTYPE html> <html lang="en"> <head> <meta char
-
js tab栏切换代码实例解析
今天机试有个内容是做网易云课堂tab栏切换的,如下 先简单说下我当时的想法 1.先弄一个大div盒子,我命名为tab 2.在大盒子tab里面有两个小盒子,分别是标题栏(tab_list)和内容栏(tab_con) 3.采用display:flex:使标题栏菜单和内容栏的内容水平对齐(可能待会放的代码不是很规范,但实现对齐效果) 4.js编写鼠标移入事件,主要是利用display:none和display:block之间的切换. 下面放下我当时写的代码吧,可能写得不是很正规,不符合习惯,请大家见谅
-
js实现tab栏切换效果
本文实例为大家分享了js实现tab栏切换效果的具体代码,供大家参考,具体内容如下 效果展示: 源码展示: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js实现tab栏切换</title> <style> * { margin: 0; margin: 0; padding: 0; list-style: none; } .nav
-
JavaScript实现简易tab栏切换内容栏
本文实例为大家分享了JavaScript实现简易tab栏切换内容栏的具体代码,供大家参考,具体内容如下 html+css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m
-
tab栏切换原理
本文是我学习tab栏切换时的笔记,步骤很详细.比较适用于JavaScript初学者 1.基础 - 排他思想 如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色. 代码运行步骤: 利用for循环遍历5个按钮: 选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行): 然后给当前点击的按钮添加指定类名,使其显示橘色(37行). 示例代码: <!DOCTYPE html> <html> <head> <meta cha
-
jquery+css实现Tab栏切换的代码实例
前几天面试碰到现场给写一个Tab栏切换的功能,思想基本上懂,但是好久没写过,一时要全部实现效果还真有点难.回来后,再把思路理一理,写一个,基础还是很重要的. 最终要实现的效果图如下: (1)点击tab栏显示对应的内容,并且tab栏样式变化.实现方式:一般tab栏如果要做成比较好看的样式,会切两张图作为背景,一张用于选中时的背景,一张用于未选中的背景.这里为了简单,只用css设置样式.然后为每个tab绑定click事件,当触发click事件时,对应的内容div的display设置block,否则设
-
jQuery插件实现非常实用的tab栏切换功能【案例】
本文实例讲述了jQuery插件实现tab栏切换功能.分享给大家供大家参考,具体如下: 效果: 核心代码:自己写了一个方法,需要用的时候直接调用就可以了. 方法如下: (function ($) { //给$的fn添加方法 $.fn.tabs=function ( options ) { /* { tabHeads:'tab-menu>li', tabHeadsClass:'active', tabBodys:'tab-main>div', tabBodysClass:'selected' }