原生JS实现选项卡效果实例

最新推荐文章于 2023-07-21 22:38:10 发布
最新推荐文章于 2023-07-21 22:38:10 发布
阅读量432 收藏
点赞数
分类专栏： web前端，ES5 文章标签： dom html javascript 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38384536/article/details/73302735
版权
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ margin:0; padding:0}
ul{list-style:none}
.wrap{ width:500px;}
a{ text-decoration:none}
.hide{ display:none}
.tab { margin-bottom:20px;}
.tab .tabList{ height:40px;}
.tab .tabList li{ float:left;}
.tab .tabList li a{ display:block; padding:0 20px; height:40px; line-height:40px; color:#666}
.tab .tabList .ac{ background:#ccc; color:#fff}
/*清除浮动*/
/*.tab .tabCont{ clear:left}*/
.tab .tabItem{ border:1px solid #ccc; padding:20px; height:200px}
</style>


<script>


//需要到页面当中找对象的时候
window.οnlοad=function(){//顶级对象（浏览器）

function tab(obj,autoRun){
//var oTab=document.getElementsByClassName('tab')[0];

//传入对象
var oUl=obj.getElementsByClassName('tabList')[0];
var aLi=oUl.getElementsByTagName('li');
var aTabItem=obj.getElementsByClassName('tabItem');

var timer;  //定时器用
//----------------------------------------------
for(var i=0; i<aLi.length; i++){
//li绑定事件
aLi[i].οnclick=function(){
//切换ac
for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};

this.className="ac"; //this指向调用该函数的对象
//指定的div显示
aTabItem[this.index].style.display="block";
n=this.index;
};

//发牌照
aLi[i].index=i;
};

if(autoRun){
//------------------------------------------------

//自动切换
var n=0;

function run(){
timer=setInterval(function(){
n++;
if(n==aLi.length){
n=0;
};

for(var j=0; j<aLi.length; j++){
aLi[j].className="";
aTabItem[j].style.display="none";//隐藏所有div
};

aLi[n].className="ac"; 
//指定的div显示
aTabItem[n].style.display="block";
},1000);
};

//加载时调用
run();


//--------------------------------------------------
//清除定时器
obj.οnmοuseοver=function(){
clearInterval(timer);
};

//重开定时器
obj.οnmοuseοut=function(){
run();
};


}



};



//------------------------------------------------------------------------
var aTab=document.getElementsByClassName('tab');

//传入对象
tab(aTab[0],true);//true  数字  “自动运行”

tab(aTab[1]);






};





</script>


</head>


<body>
<div class="wrap">
    <div class="tab">
        <ul class="tabList">
            <li class="ac"><a href="javascript:;">tabA</a></li>
            <li><a href="javascript:;">tabB</a></li>
            <li><a href="javascript:;">tabC</a></li>
            <li><a href="javascript:;">tabD</a></li>
        </ul>
        <div class="tabCont">
            <div class="tabItem">AAAAAAAAA</div>
            <div class="tabItem hide">BBBBBBBBB</div>
            <div class="tabItem hide">CCCCCCCCC</div>
            <div class="tabItem hide">DDDDDDDDD</div>
        </div>
    </div>
    <div class="tab">
        <ul class="tabList">
            <li class="ac"><a href="javascript:;">tabA</a></li>
            <li><a href="javascript:;">tabB</a></li>
            <li><a href="javascript:;">tabC</a></li>
            <li><a href="javascript:;">tabD</a></li>
        </ul>
        <div class="tabCont">
            <div class="tabItem">AAAAAAAAA</div>
            <div class="tabItem hide">BBBBBBBBB</div>
            <div class="tabItem hide">CCCCCCCCC</div>
            <div class="tabItem hide">DDDDDDDDD</div>
        </div>
    </div>
</div>
</body>
</html>
码农的N次方
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现选项卡效果
m0_46647730的博客
06-30 324
选项卡
原生js 制作简易选项卡
方寸间的博客
04-21 304
<!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-...
利用JS实现简单选项卡功能
TianXuab的博客
07-01 977
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
原生JS实现选项卡
qq_45473786的博客
03-13 1251
文章目录案例描述HTML代码全部HTML代码展示HTML代码分解 ----头部HTML代码分解 ----内容CSS样式JS实现代码全部JS代码显示JS代码分解 ----头部样式改变JS代码分解 ----内容改变 案例描述 在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示 默认的是...
在不使用JQuery情况下，如何通过ES6只使用原生js去实现选项卡特效？
薛定谔的猫的博客
05-22 181
在一些特殊的项目当中，有时候可能无法使用JQuery，那么我们在不使用JQuery的情况下如何使用原生js去实现一个选项卡特效插件？
js实现选项卡
qq_52440306的博客
09-23 6938
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
原生js实现下拉选项卡
01-19
本文实例为大家分享了js实现下拉选项卡的具体代码，供大家参考，具体内容如下 效果如下： 代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>下拉选项卡&lt...
原生js实现tab选项卡切换
12-28
本文实例为大家分享了原生js实现tab选项卡切换效果的代码，供大家参考，具体内容如下 1.html部分  <body> <li class=selected><a>时事</a></li> <li><a>体育</a></li> <li><a>娱乐</a></li> ...
《如何使用面向对象的方法实现原生js选项卡实例教程》源码
04-14
本文件属于文章《如何使用面向对象的方法实现原生js选项卡实例教程》的完整代码，在读完原创文章之后可以下载查看代码。代码中有详细的注释说明。html、css、js代码都在同一个文件中。也可以供有需要的朋友在开发中...
原生js实现选项卡功能
11-28
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>原生js选项卡写法</title> <style> #div1 div{width: 200px;height: 200px;border: 1px solid #FF0000;display: none;} .active{background: red;} </style> [removed] [removed]=function(){//原生js选项卡写法 var oDiv = document.getElem
javascript实现tabs选项卡切换效果(自写原生js)
12-01
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 效果图如下：  html代码： 代码如下: <!DOCTYPE HTML> <html lang=”en-US”> <head> <meta charset=”UTF-8″> <title>js-tabs</title> <link rel=”stylesheet” type=”text/css” href=”css/base.css” media=”all”/> <style type=”text/css”
js原生选项卡
09-03
简单易懂，希望能帮助到刚刚开始学习js的同学，欢迎下载！
微信小程序实例教程：实现tabs选项卡效果
03-29
在微信小程序中实现Tabs选项卡效果，可以帮助用户更方便地浏览和操作。 在微信小程序中实现Tabs选项卡效果需要使用小程序的组件和API。微信小程序的主要组件包括视图容器、基础内容、表单组件、导航、媒体组件等。...
JavaScript tab选项卡插件实例代码
01-19
今天，先从最简单的开始，将已有的一个Tab选项卡切换功能改写成javascript插件形式。 原生函数写法 将一个javascript方法改写为js插件最简单的方式就是将这个方法挂载到window全局对象下面 我们先来看看最原始的使用...
原生js实现选项卡
weixin_52026870的博客
02-21 128
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box{width: 450px;
原生JS项目练习——tab选项卡功能
周百万的博客
10-13 1470
一、主要功能介绍：1、写UI结构2、获取元素3、for循环遍历数组，给每一个li添加一个index属性并赋值。（原因等会会总结）4、绑定鼠标的mousemove事件，鼠标移到某个模块，将该模块变色，换上相应的图片5、当鼠标离开li的时候，就让当前li的背景颜色改变为原来的颜色,图片隐藏6、鼠标离开ul的时候，将li模块和图片恢复到刚开始的样子7、主要实现tab栏的来回切换操作原生JS好，前端学的才是真的好，对以后的发展有很大的作用。
【JavaScript】实现网页中的选项卡
最新发布
qq_55930097的博客
07-21 866
总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。
实现JavaScript 原生选项卡
06-13
好的，下面是一个简单的JavaScript原生选项卡实现： HTML部分： ```html <div class="tab"> <button class="tablinks" onclick="openTab(event, 'tab1')">Tab 1</button> <button class="tablinks" onclick="openTab(event, 'tab2')">Tab 2</button> <button class="tablinks" onclick="openTab(event, 'tab3')">Tab 3</button> <div id="tab1" class="tabcontent"> <h3>Tab 1 Content</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div id="tab2" class="tabcontent"> <h3>Tab 2 Content</h3> <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="tab3" class="tabcontent"> <h3>Tab 3 Content</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> </div> ``` CSS部分： ```css .tab { overflow: hidden; border: 1px solid #ccc; background-color: #f1f1f1; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; } .tab button:hover { background-color: #ddd; } .tab button.active { background-color: #ccc; } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none; } ``` JavaScript部分： ```javascript function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i++) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className += " active"; } ``` 解释： 通过 HTML 中的按钮元素和对应的内容区域，通过 JavaScript 的事件监听实现点击按钮显示对应的内容区域的功能。其中，openTab 函数接收两个参数，分别是事件对象 evt 和对应的选项卡名称 tabName。在函数内部，通过循环遍历所有内容区域和按钮元素，将它们的样式 display 设为 none，将所有按钮元素的类名中的 active 替换为空格。然后再将对应的内容区域样式 display 设为 block，将对应的按钮元素的类名中加上 active 样式，以示当前选中状态。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值