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

用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. C++/C#互调步骤

    一.C#调用C++ dll步骤(只能导出方法):  * 1. c++建立空项目->源文件文件夹中添加cpp文件和函数  * 2. c++属性设置中,配置类型设置为动态库dll,公共语言运行时支持 ...

  2. [转]backbone.js 示例 todos

    本文转自:http://www.css88.com/doc/backbone/examples/todos/index.html <!DOCTYPE html> <html lang ...

  3. Java入门（二）——果然断更的都是要受惩罚的。。。

    断更了一个多月,阅读量立马从100+跌落至10-,虽说不是很看重这个,毕竟只是当这个是自己的学习笔记,但有人看,有人评论,有人认同和批评的感觉还是很巴适的,尤其以前有过却又被剥夺的,惨兮兮的. 好好写 ...

  4. 网络之OSI七层模型

    1．  物理层:设备之间的比特流的传输,物理接口,电气特性等 2．  数据链路层:成帧,用MAC地址访问媒介,错误检测与修正 3．  网络层:提供逻辑地址(IP),选路 4．  传输层:可靠与不可靠的 ...

  5. 希尔排序(c++)

    希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL．Shell于1959年提出而得名. 希尔排序是把记 ...

  6. 第9章 用内核对象进行线程同步（2）_可等待计时器（WaitableTimer）

    9.4 可等待的计时器内核对象——某个指定的时间或每隔一段时间触发一次 (1)创建可等待计时器:CreateWaitableTimer(使用时应把常量_WIN32_WINNT定义为0x0400) 参数 ...

  7. LESS速查

    注释 缓存式注释/*注释内容*/  非缓存式注释//注释内容 变量 @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { col ...

  8. hibernate之关联映射

    No.1 映射一对多双向关联关系: 当类与类之间建立了关联,就可以方便的从一个对象导航到另一个或另一组与它关联的对象. 步骤一: 注意:hibernate要求在持久化类中定义集合类属性时,必须把属性类 ...

  9. 转：Configure your eclipse for C++

    from: http://omtlab.com/configure-your-eclipse-for-c/ Configure your eclipse for C++ July 7, 2013 Th ...

  10. webpack中output配置项中chunkFilename属性的用法

    chunkFilename和webpack.optimize.CommonsChunkPlugin插件的作用差不多,都是用来将公共模块提取出来,但是用法不一样,这里主要介绍chunkFilename的 ...