前端开发面向对象选项卡

web前端设计与开发|前端开发详细设计文档|web前端开发设计师

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>javascript 一个页面多个tab选项卡效果</title>
    <script src=”http://libs.baidu.com/jquery/1.9.0/jquery.js”></script>
    <script>
        window.onload = function () {
            var main = document.getElementById(“tabMain”);
            var tab = new Tab(main);
            tab.init();
        }
        function Tab(id) {
            this.aLi = id.getElementsByTagName(“li”);
            this.oDiv = id.getElementsByTagName(“div”);
        }
        Tab.prototype.init = function () {
            var obj = this; //tab实例化对象
            for (var i = 0; i < obj.aLi.length; i++) {
                obj.aLi[i].index = i; //给li添加一个索引
                obj.aLi[i].onclick = function () {
                    obj.fnClick(this); //this当前点击的元素li
                }
            }
        }
        Tab.prototype.fnClick = function (aLi) {
            //alert(this); //li
            for (var i = 0; i < this.aLi.length; i++) {
                this.aLi[i].className = “”;
                this.oDiv[i].style.display = “none”;
            }
            aLi.className = “active”;
            this.oDiv[aLi.index].style.display = “block”;
        };
    </script>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .tabMenu {
            width: 300px;
            margin: 50px auto 0 auto;
        }
        .tabMenu ul {
            display: block;
            overflow: hidden;
            width: 300px;
            height: 40px;
            background: #eee;
        }
        .tabMenu ul li {
            cursor: pointer;
            display: block;
            float: left;
            width: 100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }
        .tabMenu ul li.active {
            background: #f00;
            color: #fff;
        }
        .tabMenu .tabSide {
            display: none;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            word-break: break-all;
            width: 278px;
            border: solid 1px #eee;
        }
        .tabMenu div.active {
            display: block;
            padding: 10px;
            line-height: 20px;
            white-space: pre-wrap;
            word-break: break-all;
            width: 278px;
            border: solid 1px #eee;
        }
    </style>
</head>
<body>
    <div id=”tabMain” class=”tabMenu”>
        <ul>
            <li class=”active”>前端菜鸟</li>
            <li>前端资讯</li>
            <li>前端开发</li>
        </ul>
        <div class=”tabSide active”>前端菜鸟是为前端初学者提供div+css、html5+css3、JavaScript、jquery、前端web开发、移动端html5开发集一体的前端知识以及前端资讯网站!学习前端,从这里开始!</div>
        <div class=”tabSide”>相信来到我的文章的人大多数都是对SEO了解很少的人,不过没有关系,看完我以下的类容解说,一定会把你从一个门外汉拉进SEO知识的海洋。</div>
        <div class=”tabSide”>首先我们来认识什么是seo? SEO,是Search Engine Optimization的简写,中文翻译过来就是搜索引擎优化,指为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为,这一行为目的,是为了从搜索引擎中获得免费流量,以及更好的展现形象。</div>
    </div>
</body>
</html>

前端开发软件前十|前端开发软件介绍说明书|iphone 前端开发软件

» 本文来自:前端开发者 » 《前端开发面向对象选项卡》
» 本文链接地址:https://www.rokub.com/4121.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!