使用原生js与jQuery分别实现一个简单的tab页签

  tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形。使用面非常广,下面我们用两种方法简单实现之。

  首先,构建页面元素。页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动。而页签内容部分使用div承载即可。另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构:

  

<div id="main">
           <ul id="tabbar" class="cl">
                <li class="t1">t1</li>
                <li class="def">t2</li>
                <li class="def">t3</li>
                <li class="def">t4</li>
                <li class="def">t5</li>
            </ul>
            <div id="content">
                <div class="cont t1">Hi !</div>
                <div class="cont t2">I Like You!</div>
                <div class="cont t3">Hello World!</div>
                <div class="cont t4">How Are You?</div>
                <div class="cont t5">I‘m fine ,and you?</div>
            </div>
 </div>

  ul左浮动以后,为了清除浮动对后续元素的影响,所以通过after伪类设置clear属性,同时兼顾ie低版本加入zoom触发ie haslayout。所以就有了下面的样式:

html,body,div,ul,li{margin:0; padding:0; }

.cl{zoom:1;}
.cl:after{display:block; height:0; clear:both; visibility:hidden; overflow:hidden; content:‘.‘;}
ul{list-style:none;}

body{padding-top:100px; background:#eee; font-family:Microsoft YaHei, Arial, Helvetica, sans-serif;}
#main{margin:0 auto; width:800px;}
#main #tabbar{}
#main #tabbar li,#main #content .cont{text-align:center; color:#fff;}
#main #tabbar li{padding:0 20px; height:35px; line-height:35px; font-size:14px; cursor:pointer; float:left;}
#main #content{height:350px; overflow:hidden; position:relative;}
#main #content .cont{width:100%; height:350px; line-height:350px; font-size:48px; z-index:0; position:absolute;}

#main #tabbar li.def{color:#333; background:#fff;}
#main #tabbar li.t1,#main #content .cont.t1{color:#fff; background:#4e6b9c;}
#main #tabbar li.t2,#main #content .cont.t2{color:#fff; background:#c52946;}
#main #tabbar li.t3,#main #content .cont.t3{color:#fff; background:#33a6ff;}
#main #tabbar li.t4,#main #content .cont.t4{color:#fff; background:#ffab4e;}
#main #tabbar li.t5,#main #content .cont.t5{color:#fff; background:#64bccc;}

  html部分大致如此。

  采用原生js实现时,我们这里主要对每个li分别绑定点击事件,通过点击使当前内容页显示,其他内容页隐藏,显隐的过程通过定时器不断增减内容的透明度直至完全隐藏或显示。

  

window.onload = function(){
    var tabs = document.getElementById("tabbar").getElementsByTagName("li");
    var cont = document.getElementById("content").getElementsByTagName("div");
    var len = cont.length;
    var flag = true;

    var fade = function(elem, callback, type){
        type || (type = "in");
        var px, timer;

        if(type == "in")
        {
            px = 0;
            timer = setInterval(function(){
                px += 3;
                if(px <= 100)
                {
                    elem.style.opacity ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
                }
                else
                {
                    clearInterval(timer);
                    elem.style.opacity ? (elem.style.opacity = 1) : (elem.style["filter"] = "alpha(opacity=100)");
                    callback && callback(elem);
                }
            },10);
        }
        else
        {
            px = 100;
            timer = setInterval(function(){
                px -= 3;
                if(px >= 0)
                {
                    document.addEventListener ? (elem.style.opacity = (px / 100)) : (elem.style["filter"] = "alpha(opacity=" + px + ")");
                }
                else
                {
                    clearInterval(timer);
                    elem.style.opacity ? (elem.style.opacity = 0) : (elem.style["filter"] = "alpha(opacity=0)");
                    callback && callback(elem);
                }
            },10);
        }
    }

    for(var i = 0; i < len; i++)
    {
        cont[i].style.zIndex = len - i;
        tabs[i].index = cont[i].index = i;
        tabs[i].onclick = function(){
            if(flag)
            {
                flag = false;
                cont[this.index].style.display = "block";
                fade(cont[this.index]);
                for(var i = 0; i < len; i++)
                {
                    tabs[i].className = "def";
                    if(tabs[i].index != this.index)
                    {
                        fade
                        (
                            cont[i],
                            function(elem)
                            {
                                elem.style.display = "none";
                                elem.className = "cont t" + (elem.index + 1);
                                flag = true;
                            },
                            "out"
                        );
                    }
                }
                this.className = "t" + (this.index + 1);
            }
        }
    }
};

  由上可见,其实使用原生js操作dom还是比较麻烦的,不然“write less,do more”的jQuery也不会诞生。下面用jQuery简单实现:

$(function(){
        var tabs = $("#tabbar li");
        var cont = $("#content .cont");
        var len = cont.length;

        cont.each(function(inx, elem){$(elem).css("z-index", len - inx);}).andSelf().hide().andSelf().eq(1).show();

        tabs.click(function(){
            var inx = tabs.index(this);
            tabs.removeAttr("class").addClass("def").andSelf().eq(inx + 1).addClass("t" + (inx + 1));
            cont.fadeOut(300).not(this).andSelf().eq(inx).fadeIn(300);
        });
    }
);

  这个例子比较简单,但却很实用,当然实际工作中我们一般不会这样去写,我们通常会把以此为基础去封装一个可重用的控件,但基本思想不变。

  代码下载

时间: 07-28

使用原生js与jQuery分别实现一个简单的tab页签的相关文章

原生JS与jQuery操作DOM有什么异同点?

本文和大家分享的主要是原生JS与jQuery操作DOM相关内容,一起来看看吧,希望对大家学习javascript有所帮助. 一.创建元素节点 1.1 原生 JS 创建元素节点 document.createElement("p"); 1.2 jQuery 创建元素节点 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 document.createTextNode("Text Content"); 通常创建文

【JS】怎样用原生JS实现jQuery的ready方法

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window.onload()方法是必须等到页面内包含图片的全部元素载入完成后才干运行. $(document).ready()是DOM结构绘制完成后就运行,不必等到载入完成.   详细一些.能够从下面几方面对照它们的差别: 1.运行时间 window.onload必须等到页面内包含图片的全部元素载入完成后才干运

原生js和Jquery操作DOM

原生javascript和jQuery操作DOM的对比总结 目录: DOM元素节点:1)文档节点:2)元素节点:3)属性节点:4)文本节点:5)注释节点 1)创建节点 2)选择(访问)节点 3)操作: 1)节点操作 1)添加节点 2)删除节点 3)修改内容: 1)文本[text] 2)html 3)表单val 4)改变事件 2)CSS操作 3)动画 下文转自:http://www.jb51.net/article/103583.htm 这篇文章主要给大家介绍了原生JS和jQuery操作DOM的一

【第2章第300回】原生JS与jQuery对AJAX的实现

一.定义 W3C里这么解释AJAX: AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 就是利用JS来无刷新与后端交互,通过get和post方式把数据发送到后端,或者请求后端的数据,然后根据请求的数据进行改变DOM节点等操作,从而取消掉用form的submit方式一提交就会跳转页面的情况

simple-spa 一个简单的单页应用实例

上两篇文章说过要写一个简单的单页应用例子的, 迟迟没有兑诺, 实在有愧 哈哈.这篇写给小白用户哈. 正好趁今天风和日丽,事情不多, 把从项目里的代码扣取了一下, 整理了一个简单的例子.因为我们生产项目用到es6 还有构建工具,为了让例子足够简单和原生,除了一个zepto,连require都是我之前写的文章里的实现的,很简单70行代码. 事例地址 github:https://github.com/skyweaver213/simple-spa demo: https://skyweaver213

原生js与jQuery操作DOM的区别

转自网络 一.创建元素节点 1.1 原生JS创建元素节点 ? 1 document.createElement("p"); 1.2 jQuery创建元素节点 ? 1 $('<p></p>');` 二.创建并添加文本节点 2.1 原生JS创建文本节点 ? 1 `document.createTextNode("Text Content"); 通常创建文本节点和创建元素节点配合使用,比如: ? 1 2 3 var textEl = documen

原生js和jquery发送ajax请求及封装

原生js                                   // ajax get 五部曲function ajax_get(url,data){ // 异步对象 var ajax=new XMLHttpRequest(); // 设置url和请求方式 // url方法 如果有数据要把数据拼接到url中?name=jack&age=20 if(data){ url+=?; url+=data; }else{}; ajax.open('get',url); // 发送请求 aja

AJAX请求和跨域请求详解(原生JS、Jquery)

一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 本博客实验环境: python:2.7.11 web框架:tonado jquery:2.1.1 二.“伪”AJAX 由于

原生JS和JQuery代码编写窗口捕捉函数和页面视觉差效果(scroll()、offsetTop、滚动监听的妙用)

想实现窗口滚动到一定位置时,部分网页的页面发生一些变化,但是手头没有合适的插件,所以就想到自己编写一个简易的方法, 想到这个方法要有很高的自由度和适应性,在这,就尽量的削减其功能,若有错误的地方或者更好的建议,请大家评论,一同探讨, 好了废话不多说,下面开始干活了! 首先,说一下我想实现的基本功能: 此方法需要有2个基本形参,,一个是我要监测的标签a,另一个是我要监测标签相对于哪个标签b做的距离检测. 当a和b的距离达到一定范围的时候,让网页局部发生一些变化效果,这是我们的预期. 以下是我的方法