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

用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. RCC BUCK-BOOST变压器设计

    电路处于Buck-Boost DCM模式,最恶劣情况为输入电压最低时.取频率为f 以下图为例: 1.MOS耐压选择: Vmos≥Vinmax+Vout+80 2.保证磁芯不饱和且始终工作在DCM模式 ...

  2. POJ1062昂贵的聘礼[最短路建模]

    昂贵的聘礼 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 45892   Accepted: 13614 Descripti ...

  3. JavaScript RegExp 对象

    JavaScript RegExp 对象 RegExp 对象用于规定在文本中检索的内容. 什么是 RegExp? RegExp 是正则表达式的缩写. 当您检索某个文本时,可以使用一种模式来描述要检索的 ...

  4. TestLink学习二：Windows搭建TestLink环境

    环境准备: 搭建php5.4.39+apache2.2+mysq5.5.28l环境 (可参考http://www.cnblogs.com/yangxia-test/p/4414161.html) (注 ...

  5. [No000034]知乎-长期接收碎片化知识有什么弊端？

    你所接受的一切信息,构成了你的思维方式. 所以,长期接受碎片信息的后果,就是让你的思维变得狭隘,难以进行复杂的思考. 碎片信息通常具备这样的特征: •它们往往是一些事实的集合而非逻辑 •它们往往大量简 ...

  6. uva167 The Sultan's Successors

    The Sultan's Successors Description The Sultan of Nubia has no children, so she has decided that the ...

  7. Oracle取TOP N条记录(转载)

    在SQL Server里面有top关键字可以很方便的取出前N条记录,但是Oracle里面却没有top的使用,类似实现取出前N条记录的简单方法如下: 方法1:利用ROW_NUMBER函数 取出前5条记录 ...

  8. window对象的screen详解

    screen.availHeight     返回屏幕的高度(不包括Windows任务栏)screen.availWidth     返回屏幕的宽度(不包括Windows任务栏)screen.colo ...

  9. parentNode的兼容性问题

    IE9下获取对象层次中的父对象,9以上获取文档层次中的父对象 <table><tr><p><td id="haha">haha< ...

  10. sublime和python--path

    配置Sublime Text 2 的Python运行环境 (2013-09-11 11:36:17) 转载▼ 标签: python 分类: 科技相关     Sublime Text 2作为一款轻量级 ...