基于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 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
Angular.js实现注册系统的实例详解
Dec 18 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
Vue0.1的过滤代码如何添加到Vue2.0直接使用
Aug 23 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
微信小程序实现指定显示行数多余文字去掉用省略号代替
Jul 25 Javascript
vue项目强制清除页面缓存的例子
Nov 06 Javascript
Antd表格滚动 宽度自适应 不换行的实例
Oct 27 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
更改localhost为其他名字的方法
2014/02/10 PHP
PHP上传文件参考配置大文件上传
2015/12/16 PHP
基于php编程规范(详解)
2017/08/17 PHP
mongodb和php的用法详解
2019/03/25 PHP
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
js如何实现淡入淡出效果
2020/11/18 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
python实现windows下文件备份脚本
2018/05/27 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python远程linux执行命令实现
2020/11/11 Python
美国社交购物市场:MassGenie
2019/02/18 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
Prototype是怎么扩展DOM的
2014/10/01 面试题
大学生村官事迹材料
2014/01/21 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
骨干教师申报材料
2014/12/17 职场文书
地陪导游欢迎词
2015/01/26 职场文书
教师学期个人总结
2015/02/11 职场文书
紧急通知
2015/04/17 职场文书
地道战观后感
2015/06/04 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书