基于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 相关文章推荐
THREE.JS入门教程(6)创建自己的全景图实现步骤
Jan 25 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
JavaScript的字符串方法汇总
Jul 31 Javascript
浅谈js中字符和数组一些基本算法题
Aug 15 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
JS实现图片手风琴效果
Apr 17 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
Sep 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安装攻略:常见问题解答(一)
2006/10/09 PHP
《PHP边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php实现根据词频生成tag云的方法
2015/04/17 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
PHP实现抽奖功能实例代码
2020/06/30 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
jQuery取得iframe中元素的常用方法详解
2016/01/14 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
写gulp遇到的ES6问题详解
2018/12/03 Javascript
Vue侦测相关api的实现方法
2019/05/22 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
ant design实现圈选功能
2019/12/17 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
vue 路由meta 设置导航隐藏与显示功能的示例代码
2020/09/04 Javascript
详解Vue 的异常处理机制
2020/11/30 Vue.js
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
Python处理Excel文件实例代码
2017/06/20 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
自动在Windows中运行Python脚本并定时触发功能实现
2021/09/04 Python
Python 数据可视化之Bokeh详解
2021/11/02 Python
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang