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

用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. [转]Stop Sharing Session State between Multiple Tabs of Browser

    本文转自:http://jinaldesai.net/stop-sharing-session-state-between-multiple-tabs-of-browser/ Scenario: By ...

  2. 怎么解决ZBrush保存历史记录太多问题

    经常有用户反映说ZBrush ®保存历史记录太多了,导致文件太大了!模型已经是降低级别保存了,在保存历史记录的时候还是很慢很慢,不知道怎么才能减少ZBrush保存的历史步骤的多少.针对这一问题,小编统 ...

  3. 常用Meta整理

    标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他web 服务. ——W3School 必要属性 ...

  4. [No000053]我25岁了，是应该继续挣钱，还是选择自己的爱好？--正好庆祝自己25岁生日

    你所问的问题正是问题所在.停止做出重大决策,专注于缩小你想到达的地位与你之间的差距. 成功的生活并非由简单而鲜明的决定组成,它们更像这幅图: 但悲伤的是,太多人的状态类似于这幅图: 我知道这听上去很显 ...

  5. [No000018]都在背单词，为啥学霸那么厉害-如何在一天内记200个单词？

  6. java 22 - 17 多线程之等待唤醒机制（接16）

    先来一张图,看看什么叫做等待唤醒机制 接上一章的例子. 例子:学生信息的录入和获取 * 资源类:Student  * 设置学生数据:SetThread(生产者) * 获取学生数据:GetThread( ...

  7. JS读取写入删除COOKIE的各种操作

    1. .NET后置代码中获取 Response.Redirect("http://www.baidu.com?id=" +Request.Cookies["size&qu ...

  8. ASP.NET常用页面指令

    1.<%@Page "属性"="值"%>指令 AutoEventWireup:指定页的事件是否自动绑定,默认值true为启用自动绑定. CodeBe ...

  9. parentNode的兼容性问题

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

  10. FMDB处理动态插入语句

    昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(N ...