基于javascript实现最简单选项卡切换


Posted in Javascript onFebruary 01, 2017

本文教大家用原生js实现的最简单选项卡切换效果,鼠标滑过,对应的隐藏部分显示,并且样式发生改变。
代码最简洁,js行为优化版,复制粘贴即可使用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javascript-实现最简易选项卡</title>
<style>
body,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Tahoma;}
#outer{width:450px;margin:10px auto;}
#tab{overflow:hidden;zoom:1;background:#000;border:1px solid #000;}      
#tabli{float:left;color:#fff;height:30px;
cursor:pointer;line-height:30px;list-style-type:none;
padding:0 20px;}
#tab li.current{color:#000;background:#ddd;}
#content{border:1px solid #000;border-top-width:0;}
#content ul{line-height:25px;
display:none;margin:0 30px;padding:10px 0;}
</style>
</head>
<body>
<div id="outer">
  <ul id="tab">
    <li class="current">第一课</li>
    <li>第二课</li>
    <li>第三课</li>
  </ul>
  <div id="content">
    <ul style="display:block;">
      <li>每天一个</li>
      <li>小应用</li>
      <li>提升你的</li>
      <li>javascript</li>
      <li>基础</li>
    </ul>
    <ul>
      <li>改变网页背景颜色</li>
      <li>函数传参</li>
      <li>高重用性函数的编写</li>
      <li>126邮箱全选效果</li>
      <li>循环及遍历操作</li>
      <li>调试器的简单使用</li>
      <li>典型循环的构成</li>
      <li>for循环配合if判断</li>
    </ul>
    <ul>
      <li>函数详解:函数构成、调用、事件、传参数</li>
      <li>定时器的使用:setInterval、setTimeout</li>
      <li>定时器应用:站长站导航效果</li>
      <li>定时器应用:自动播放的选项卡</li>
      <li>定时器应用:数码时钟</li>
      <li>程序调试方法</li>
    </ul>
  </div>
</div>
<script type="text/javascript">
(function(){
    var $ = function(id){
      return document.getElementById(id);
    }
    //取到相应的dom节点
    var myli = $("tab").getElementsByTagName("li");
    var myul = $("content").getElementsByTagName("ul");
    //循环,让每个小选项卡对应相应的ul,对应的显示,不对应的隐藏
    for(var i=0;i<myli.length;i++){
      myli[i].index = i; //取到对应的下标
      myli[i].onmouseover=function(){
        //循环要显示的ul,当下标等于鼠标滑过事件的li时,样式才发生改变
        for(var n=0;n<myli.length;n++){
          myli[n].className ="";
          myul[n].style.display="none";
          this.className="current";
          myul[this.index].style.display="block";
        }
      }

    }
})()

</script>
</body>
</html>

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

Javascript 相关文章推荐
深入理解javascript中的立即执行函数(function(){…})()
Jun 12 Javascript
JQuery对ASP.NET MVC数据进行更新删除
Jul 13 Javascript
js实现无缝滚动图
Feb 22 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
微信小程序通过websocket实时语音识别的实现代码
Aug 19 Javascript
Vue和React有哪些区别
Sep 12 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
vue+springboot实现登录验证码
May 27 Vue.js
快速实现jQuery多级菜单效果
Feb 01 #Javascript
angular实现商品筛选功能
Feb 01 #Javascript
Bootstarp基本模版学习教程
Feb 01 #Javascript
angular实现表单验证及提交功能
Feb 01 #Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 #Javascript
Javascript基础回顾之(二) js作用域
Jan 31 #Javascript
Javascript基础回顾之(一) 类型
Jan 31 #Javascript
You might like
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
php中几种常见安全设置详解
2010/04/06 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
javascript完美实现给定日期返回上月日期的方法
2017/06/15 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
openlayers实现地图弹窗
2020/09/25 Javascript
Python enumerate遍历数组示例应用
2008/09/06 Python
Python实现发送email的几种常用方法
2014/08/18 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
python异步存储数据详解
2019/03/19 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
.NET面试题:什么是值类型和引用类型
2016/01/12 面试题
阳光体育活动实施方案
2014/05/25 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python
Java异常处理try catch的基本用法
2021/12/06 Java/Android
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏