<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta charset="gb2312">

    <link rel="stylesheet" href="main.css">

    <script type="text/javascript" src="main.js"></script>

    <title>Document</title>

</head>

<body>

    <div class="top">

        <ul class="clear" id="btn_one">

            <li class="light" data-color="red">one</li>

            <li data-color="blue">two</li>

            <li data-color="yellow">three</li>

        </ul>

    </div>

    <div class="main" id="amain">

        <div class="min main1">

            <ul>

                <li>这里有座山</li>

                <li>这里有座山</li>

                <li>这里有座山</li>

                <li>这里有座山</li>

                <li>这里有座山</li>

            </ul>

        </div>

        <div class="min main2" style="display: none">

            <ul>

                <li>窗外有风景</li>

                <li>窗外有风景</li>

                <li>窗外有风景</li>

                <li>窗外有风景</li>

                <li>窗外有风景</li>

            </ul>

        </div>

        <div class="min main3" style="display: none">

            <ul>

                <li>天上有太阳</li>

                <li>天上有太阳</li>

                <li>天上有太阳</li>

                <li>天上有太阳</li>

                <li>天上有太阳</li>

            </ul>

        </div>

    </div>

</body>

</html>

上面是html代码，很简单就是一个选项卡内容

* {

    margin: 0;

    padding: 0;

    font-size: 14px;

}

/*这里关键了，在float下一样可以获取width和height的值*/

.clear {

    zoom: 1;

}

.clear:after {

    content: '';

    display: block;

    clear: both;

}

.top ul {

    list-style-type: none;

}

.top ul li {

    width: 200px;

    height: 50px;

    line-height: 50px;

    text-align: center;

    float: left;

    background-color: powderblue;

    color: pink;

    border: 2px solid powderblue;

}

.top ul li.light {

    border: 2px solid red;

    color: red;

}

.main {

    width: 612px;

    height: 300px;

    position: relative;

    background: red;

}

.min {

    width: 612px;

    height: 300px;

    position: absolute;

    left: 0;

    top: 0;

}

.min ul li {

    height: 30px;

    line-height: 30px;

    font-size: 20px;

}

上面是CSS样式，很简单；用light样式来高亮li初始

// 通过ID  封装函数,如果id字符串等于string，返回getElementById(id)

// 否则返回id 本身；

function $(id) {

    return typeof id == "string" ? document.getElementById(id) : id;

}

window.onload = function() {

    //定义函数titles(li的集合)divs(div的集合)；

    var titles = $("btn_one").getElementsByTagName("li");

    var divs = $("amain").getElementsByTagName("div");

    //当titles和divs的长度不一样就不执行；

    if (titles.length != divs.length) {

        return;

    }

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

        //为btn_on下的每个li添加索引；

        titles[i].id = i;
　　　　 //滑动鼠标onmouseover时触发事件;

        titles[i].onmouseover = function() {

            //getAttribute可以取得自定义标签data-color的值；

            var btnstyle = this.getAttribute("data-color");

            //清楚所有li和div上的样式

            clearBtn();

            //鼠标滑过哪个li就高亮哪个li；

            this.className = "light";

            //data-color当下的值给当前次数的li的内容

            this.style.color = btnstyle;

            //把data-color当下的值给当前次数li的边框

            this.style.border = '2px solid ' + btnstyle;

            //设置当前li所对应的div为显示状态

            divs[this.id].style.display = "block";

        }

    }

    function clearBtn() {

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

            //li的样式为空

            titles[i].className = "";

            //li的内容为白色

            titles[i].style.color = "";

            //li的边框为空

            titles[i].style.border = "";

            //div为隐藏状态

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

        }

    }

}

就是通过索引来连接上下两个div，直接可以通过titles和divs两个函数进行响应

简单的javasrcipt选项卡的更多相关文章

  1. jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果

    相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...

  2. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...

  3. Jquery 简单的Tab选项卡特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 简单竖向Tab选项卡

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. jquery简单实现tab选项卡效果

    html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...

  6. （新手向）基于Bootstrap的简单轮播图的手机实现

    个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...

  7. js 实现tab选项卡

    最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...

  8. EUI ViewStack实现选项卡组件 （封装了一个UI类）

    封装一个选项卡的UI,用来应付游戏中各种需要选项卡的界面. 例如背包,背包界面的选项卡可以切换装备.物品.符文.宝箱. 下图方法的实现参考:EUI ViewStack实现选项卡组件 假如在主页Home ...

  9. 浅谈Android选项卡（二）

    前面简单介绍了选项卡,下面以及后面的几篇文章介绍下Android选项卡的几种简单实现方法. http://blog.csdn.net/xia215266092/article/details/9613 ...

随机推荐

  1. Java NIO Channel之FileChannel [ 转载 ]

    Java NIO Channel之FileChannel [ 转载 ] @author zachary.guo 对于文件 I/O,最强大之处在于异步 I/O(asynchronous I/O),它允许 ...

  2. java中float和double的区别

    float表示单精度浮点数在机内占4个字节,用32位二进制描述. double表示双精度浮点数在机内占8个字节,用64位二进制描述.浮点数在机内用指数型式表示,分解为:数符,尾数,指数符,指数四部分. ...

  3. HDU 5908 Abelian Period (BestCoder Round #88 模拟+暴力)

    HDU 5908 Abelian Period (BestCoder Round #88 模拟+暴力) 题目链接http://acm.hdu.edu.cn/showproblem.php?pid=59 ...

  4. sql中判断是否存在某个对象

    If object_id(N'对象名',N'对象类型') is not null   例如:表是否存在 if object_id(N'tablename',N'U') is not null begi ...

  5. php +mysql 添加 删除 修改 insert into delete update

    INSERT INTO 插入数据库 $sql = "INSERT INTO subject (uid,fun,title) VALUES (3,88,'语文')"; $query ...

  6. linux（centos7）下SVN服务器如何搭建

    linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINUX下如何搭建SVN服务器呢?那么今天给大家分享一下linux(centos)搭建SVN服务器的思路! ...

  7. 重读The C programming Lanuage 笔记二：运算符优先级

    运算符的优先级和结合性有明确的规定,但是,除少数例外情况外,表达式的求值次序没有定义,甚至某些有副作用的子表达式也没有定义. 也就是说运算符的定义保证了其操作数按某一特定的顺序求值,否则具体实现可以自 ...

  8. java中类与对象

    讨论下有关类的知识: 首先是java中累的定义 定义了一组大体上相似的对象. 一个类所包含的方法和数据描述一组对象的共同行为和属性. 对象则是类的具体化,是类的实例. 类通过派生可以有子类,同样也可以 ...

  9. Xcode-之项目重命名

    一.前言 在iOS开发过程中,对于以前的项目或者想改一下项目的名字,都会遇到比较麻烦的事情.直接改项目名,然而它会牵扯一大堆问题,并且不能把所有的名字都能改过来.有些文件改了项目名后,引导路径错误,导 ...

  10. Counting Stars

    Counting Stars 题目链接:http://acm.xidian.edu.cn/problem.php?id=1177 离线+一维树状数组 一眼扫过去:平面区间求和,1e6的数据范围,这要h ...