基于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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
JS实现评价的星星功能
Aug 20 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
详谈js的变量提升以及使用方法
Oct 06 Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 Javascript
快速实现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的autoload机制的实现解析
2012/09/15 PHP
php使用APC实现实时上传进度条功能
2015/10/26 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
DOM精简教程
2006/10/03 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JS实现具备延时功能的滑动门菜单效果
2015/09/17 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
javaScript基础详解
2017/01/19 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
Vue全家桶实践项目总结(推荐)
2017/11/04 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
vue mvvm数据响应实现
2020/11/11 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
python list排序的两种方法及实例讲解
2017/03/20 Python
用python实现k近邻算法的示例代码
2018/09/06 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python+Opencv身份证号码区域提取及识别实现
2020/08/25 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
软件测试笔试题
2012/10/25 面试题
三八妇女节活动总结
2014/05/04 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android