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

用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. openfire+asmack搭建的安卓即时通讯（七） 15.5.27

    本地化之章! 往期传送门: 1.http://www.cnblogs.com/lfk-dsk/p/4398943.html 2.http://www.cnblogs.com/lfk-dsk/p/441 ...

  2. poj3635Full Tank?[分层图最短路]

    Full Tank? Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 7248   Accepted: 2338 Descri ...

  3. ComboBox的数据联动

    实现效果: 点击年级下拉框值时,获取科目下拉框值 一:加载年级下拉框值 GradeDAL层: //检索所有年级名称集合,返回的是泛型集合List<Grade> public List< ...

  4. rqnoj28[stupid]愚蠢的宠物

    题目描述 背景 大家都知道,sheep有两只可爱的宠物(一只叫神牛,一只叫神菜).有一天,sheep带着两只宠物到狗狗家时,这两只可爱的宠物竟然迷路了…… 描述 狗狗的家因为常常遭到猫猫的攻击,所以不 ...

  5. luogu2038[NOIP2014 T4]无线网络发射器选址

    题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城市的布局为由严格平行的129 条东西向街道和129 条南北向街道所形成的网格状,并且相邻 ...

  6. 事件--c#

    以上是事件的几个操作. 事件由五个组件构成: 具体作用如下: 事件声明: event  委托类型 事件名:例子: public event EventHandler Elapsed; 还可同时声明几个 ...

  7. oracle批量update 转

    需求: 将t2(t_statbuf)表中id和t1(T_Mt)表相同的记录更新进t1表. 1.错误的写法: update table_name t1 set (a,b,c)=( select a,b, ...

  8. linux运维中的命令梳理（二）

    回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...

  9. C语言--指向多维数组的指针和指针数组

    #include <stdio.h> //void show(char *p[]); ]); int main(){ ][]={","abc","x ...

  10. Debian 8(Jessie) 安装自带Mysql

    执行命令 sudo apt-get install mysql-server 这会把mysql-client也装上, 版本都是5.5. 安装过程中会提示你输入两遍root口令. 用ps aux|gre ...