JS实现简单tab选项卡切换


Posted in Javascript onOctober 25, 2019

本文实例为大家分享了JS实现简单tab选项卡切换的具体代码,供大家参考,具体内容如下

本人在上一篇文章也写了用JS来实现tab选项卡切换效果,但是上次的那个代码比较复杂,这次是简化版的。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Tab效果</title>
 <style type="text/css">
 ul{
 list-style: none;
 }
 *{
 margin: 0;
 padding: 0;
 }
 #tab{
 border: 1px solid #ccc;
 margin: 20px auto;
 width: 403px;
 border-top: none;
 }
 .list ul{
 overflow: hidden;
 }
 .list li{
 float: left;
 }
 .list li{
 padding-left: 28px;
 padding-right: 28px;
 padding-top: 6px;
 padding-bottom: 6px;
 border: 1px solid #ccc;
 background: -moz-linear-gradient(top, #FEFEFE, #EDEDED);
 background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed));
 border-right: none;
 cursor: pointer;
 }
 #listCon{
 height: 100px;
 }
 #listCon div{
 padding:10px;
 position:absolute;
 opacity:0;
 filter:alpha(opacity=0);
 }
 .list li:first-child{
 border-left: none;
 }
 .list li:hover{
 background: #fff;
 border-bottom: none;
 }
 .list li.cur{
 background: #fff;
 border-bottom: none;
 }
 #listCon div.cur{
 opacity:1;
 filter:alpha(opacity=100);
 }
 </style>
</head>
<body>
 <div id="tab">
 <div class="list">
 <ul>
 <li class="cur">许嵩</li>
 <li>周杰伦</li>
 <li>林俊杰</li>
 <li>陈奕迅</li>
 </ul>
 </div>
 <div id="listCon">
 <div class="cur">断桥残雪、千百度、幻听、想象之中</div>
 <div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
 <div>被风吹过的夏天、江南、一千年以后</div>
 <div>十年、K歌之王、浮夸</div>
 </div>
 </div>
 <script type="text/javascript">
 window.onload = function(){
 var oDiv = document.getElementById("tab");
 var lis = oDiv.getElementsByTagName("li");
 var oDivCon = document.getElementById("listCon");
 var lisDiv = oDivCon.getElementsByTagName("div"); 
 for(var i=0;i<lis.length;i++){
 lis[i].index = i;
 lis[i].onmouseover = function(){
  show(this.index);
 }
 }
 function show(a){
 for(var j=0;j<lis.length;j++){
  lis[j].className = "";
  lisDiv[j].className = "";  
 }
 lis[a].className = "cur";
 lisDiv[a].className = "cur";
 }
 }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
打开超链需要“确认”对话框的方法
Mar 08 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
动态加载js文件简单示例
Apr 21 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
js禁止Backspace键使浏览器后退的实现方法
Sep 01 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 #Javascript
JS实现骰子3D旋转效果
Oct 24 #Javascript
Vue可自定义tab组件用法实例
Oct 24 #Javascript
js实现转动骰子模型
Oct 24 #Javascript
js实现固定区域内的不重叠随机圆
Oct 24 #Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 #Javascript
windows实现npm和cnpm安装步骤
Oct 24 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
PHP读书笔记整理_结构语句详解
2016/07/01 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
2013/12/05 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
jQuery实现冻结表格行和列
2015/04/29 Javascript
Javascript实现div的toggle效果实例分析
2015/06/09 Javascript
让JavaScript中setTimeout支持链式操作的方法
2015/06/19 Javascript
JavaScript脚本库编写的方法
2015/12/09 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
基于vue-element组件实现音乐播放器功能
2018/05/06 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
JavaScript find()方法及返回数据实例
2020/04/30 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
百度软件工程师职位
2013/02/14 面试题
四种会话跟踪技术
2015/05/20 面试题
日语系毕业生推荐信
2013/11/11 职场文书
搞笑获奖感言
2014/01/30 职场文书
大学生期末自我鉴定
2014/02/01 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2015公务员试用期工作总结
2014/12/12 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
离婚被告答辩状
2015/05/22 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书