趁着公司不忙，抓紧充充电，开始可能会写的不好，但是每写一个都是一点进步，哈哈，加油

用js实现选项卡切换

1.获取元素

2.初始状态

3.通过循环清空元素状态

4.点击操作以及对应的内容切换

5.自定义索引（通过HTML加进去的自定义属性，部分浏览器不支持，必须通过js添加）

html代码：

<body>

    <ul id="list" class="clearFix">

        <li>一</li>

        <li>二</li>

        <li>三</li>

        <li>四</li>

    </ul>

    <div>111</div>

    <div>222</div>

    <div>333</div>

    <div>444</div>

</body>

css代码：

<link rel="stylesheet" type="text/css" href="css/public.css"/>

    <style type="text/css">

        #list li{float:left;width: 100px;height: 40px;line-height: 40px;text-align: center;background: #dbdbdb;cursor: pointer;}

        #list li.light{background: #45B035;color: #fff;}

        div{width: 400px;height: 400px;line-height: 400px;text-align: center;background: #999;display: none;}

    </style>

js代码：

<script type="text/javascript">

        window.onload=function(){

            var oList=document.getElementById("list");

            var aLi=oList.getElementsByTagName("li");

            var aDiv=document.getElementsByTagName("div");

            aLi[0].className="light";

            aDiv[0].style.display="block";

            for(var i=0;i<aLi.length;i++){

                aLi[i].index=i;

                aLi[i].onclick=function(){

                    for(var i=0;i<aLi.length;i++){

                        aLi[i].className="";

                        aDiv[i].style.display="none";

                    }

                    this.className="light";

                    aDiv[this.index].style.display="block";

            }

        }

}

效果：

选项卡js的更多相关文章

  1. 选项卡 js操作

    html代码展示(这里展示的是关于日程的标签页)css样式这里省略了>>>>自己写的可能更好看 <div class="row"> <ul ...

  2. 选项卡js版封装

    以下是封装函数: // id:最外边大盒的id名function tab(id,ev){                var oWrap = document.getElementById(id); ...

  3. mui的选项卡js选中指定项

    dom结构:在一定条件下想默认选中第二个选项卡 <div id="segmentedControl" class="mui-segmented-control mu ...

  4. Tab选项卡切换卡JS效果

    <script type="text/javascript"> /* tab切换选项卡js效果 writed by *** 2010.08.13 1.currentid ...

  5. 移动web：图片切换(焦点图)

    在web页面上图片切换(焦点图)效果实在是太常见了,PC端.移动端到处都有它的身影. 上次写了个tab选项卡的效果,在这里延续一下,改成图片切换的效果. 如果不需要自动播放,稍微修改下html标签.和 ...

  6. jquery树形菜单

    转自:http://keleyi.com/dev/3068696139522ae4.htm 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. js和jquery实现简单的选项卡

    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...

  8. JS入门学习，写一个简单的选项卡

    /* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById('');    一定要多输,熟悉后o u什么的字母别搞 ...

  9. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

随机推荐

  1. 单机搭建Android开发环境(五)

    前文介绍了Android系统开发环境的搭建,本文将简单介绍Android应用开发环境的搭建. 基于Android Studio搭建应用开发环境,相比使用Eclipse简单得多.Android Stud ...

  2. lock关键字只不过是C#提供的语法糖

    lock关键字只不过是C#提供的语法糖, 最终使用的还是Monitor类. Monitor类的Enter方法要求传入的参数不为null, 否则会有ArgumentNullException excep ...

  3. HQL基础查询语句

    HQL基础查询语句 1.使用hql语句检索出Student表中的所有列 //核心代码 @Test public void oneTest() { Query query=session.createQ ...

  4. SVN的使用方法

    SVN的使用方法: 新建文件夹:文件夹1 在文件夹上点击右键--选择 SVN Checkout--弹出checkout窗口 下载文件的url获取:打开SVN--在要下载的文件上点击右键--点击Copy ...

  5. luogu1022计算器的改良[noip2000提高组Day1 T1]

    题目背景 NCL是一家专门从事计算器改良与升级的实验室,最近该实验室收到了某公司所委托的一个任务:需要在该公司某型号的计算器上加上解一元一次方程的功能.实验室将这个任务交给了一个刚进入的新手ZL先生. ...

  6. 代码管理工具之git的学习

    1.代码管理工具git的学习  http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html 2.github的使用帮助   https:// ...

  7. webpack常用插件

    extract-text-wepback-plugin 该插件用于把css代码从页面中抽离出来,以link的形式从外部加载 html-webpack-plugin 可以自动快速地生成html文件

  8. mui禁止滚动条和禁止滚动

    mui.plusReady(function () { plus.webview.currentWebview().setStyle({ scrollIndicator: 'none' }); }); ...

  9. iOS NSFileManager 使用详解

    使用NSFileManager 文件系统接口 允许访问文件夹内容 创建 重命名 删除文件 修改文件和文件属性,以及Finder对所有文件系统任务执行的一般操作. 访问NSFileManager,使用共 ...

  10. 使用SecureCRT连接AWS EC2

    AWS提供的XXX.pem文件, 如果使用Ubuntu等linux系统,直接使用ssh命令即可访问AWS上的Linux-EC2实例. $ ssh -i XXX.pem ec2-user@{IP/hos ...