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 相关文章推荐
javascript网页关闭时提醒效果脚本
Oct 22 Javascript
javascript数字数组去重复项的实现代码
Dec 30 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
学习JavaScript设计模式之观察者模式
Apr 22 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
Sep 10 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
Vue获取微博授权URL代码实例
Nov 04 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
PHP的FTP学习(一)
2006/10/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
js 字符串转化成数字的代码
2011/06/29 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
2016/03/16 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
vue+Element-ui前端实现分页效果
2020/11/15 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
跟老齐学Python之正规地说一句话
2014/09/28 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
win7下 python3.6 安装opencv 和 opencv-contrib-python解决 cv2.xfeatures2d.SIFT_create() 的问题
2019/10/24 Python
Python制作简易版小工具之计算天数的实现思路
2020/02/13 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
实习自我评价怎么写
2013/12/02 职场文书
校运会入场式解说词
2014/02/10 职场文书
祖国在我心中演讲稿(小学生)
2014/09/23 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年度思想工作总结
2014/11/27 职场文书
预备党员转正材料
2014/12/19 职场文书