基于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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
js+JQuery返回顶部功能如何实现
Dec 03 Javascript
javascript操作css属性
Dec 30 Javascript
通过Jquery的Ajax方法读取将table转换为Json
May 31 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
layui中table表头样式修改方法
Aug 15 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
手把手教你实现 Promise的使用方法
Sep 02 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 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
融入意大利的咖啡文化
2021/03/03 咖啡文化
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
url decode problem 解决方法
2011/12/26 PHP
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
Easyui和zTree两种方式分别实现树形下拉框
2017/08/04 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
微信小程序点击顶部导航栏切换样式代码实例
2019/11/12 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python中字符串List按照长度排序
2019/07/01 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
德国亚洲食品网上商店:asiafoodland.de
2019/12/28 全球购物
Java模拟试题
2014/11/10 面试题
大专学生求职信
2014/07/04 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python