• <!doctype html>
    
<html lang="en">
    
 <head>
    
  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">
    
  <meta name="Author" content="Create by double 2015-07-09">

  <title>jquery实现tab</title>
    
  <script src="jquery-1.7.2.js"></script>
    
  <style>
    
        *{
    
                padding:0;
    
                margin:0;
    
        }
    
        ul{
    
                list-style-type:none;
    
        }
    
        #ul{
    
                height:30px;
    
                margin-bottom:10px;
    
        }
    
        body{
    
                margin:50px;
    
        }
    
        #ul li{
    
                height:30pxx;
    
                line-height:30px;
    
                padding:0 15px;
    
                border:1px solid #abcdef;
    
                float:left;
    
                margin-right:3px;
    
                cursor:pointer;
    
        }
    
        #ul li.current{
    
                background:#abcdef;
    
        }
    
        #content div{
    
                width:300px;
    
                height:200px;
    
                border:1px solid #abcdef;
    
                display:none;

        }
    
        #content div.show{
    
                display:block;
    
        }
    
  </style>
    
 </head>
    
 <body>
    
        <ul id="ul">
    
                <li class="current">php</li>
    
                <li>java</li>
    
                <li>js</li>
    
        </ul>
    
        <div id="content">
    
            <div class="show">php...介绍</div>
    
            <div>java...介绍</div>
    
            <div >js...介绍</div>
    
        </div>
    
    <script>
    
            //未使用事件委托
    
                var ul = document.getElementById('ul');
    
                var li = ul.getElementsByTagName('li');
    
                var content = document.getElementById('content');
    
                var div = content.getElementsByTagName('div');
    
                for(var i=0;i<li.length;i++){
    
                    li[i].index = i;
    
                        li[i].onclick=function(){
    
                            for(var i=0;i<li.length;i++){
    
                                        li[i].className = ' ';
    
                                        div[i].style.display='none';
    
                                };
    
                                    this.className='current';
    
                                    div[this.index].style.display='block';
    
                                }
    
                }

                //采用事件委托处理
    
                var oul = document.getElementById('ul');
    
                var ali = ul.getElementsByTagName('li');
    
                var content = document.getElementById('content');
    
                var div = content.getElementsByTagName('div');

                    //ali[i].index = i;
    
                    oul.onclick = function(ev) {

                    var ev = ev || window.event;
    
                    var target = ev.target || ev.srcElement;

                    if(target.nodeName.toLowerCase() == "li"){

                    for(var i=0, len=ali.length; i<len; i++){

                        if(ali[i] == target){
    
                            //alert(ali[i]);
    
                            ali[i].className = "current";
    
                            div[i].style.display = "block";
    
                        }
    
                        else{

                                ali[i].className = "";
    
                                div[i].style.display = "none";
    
                            }
    
                        }
    
                    }
    
                }
    
            //jquery实现更方便
    
            $('#ul li').click(function(){
    
                //点击li的时候要切换样式
    
                $(this).addClass('current').siblings().removeClass('current');
    
                //根据li的索引值，确定div的显示，其他隐藏
    
                $('#content>div').eq($(this).index()).show().siblings().hide();
    
            });
    
            //jquery实现更方便
    
            $('#ul li').click(function(){
    
                //点击li的时候要切换样式
    
            $(this).addClass('current').siblings().removeClass('current').parent().next().find('div').eq($(this).index()).show().siblings().hide();
    
                    });
    
        </script>
    
     </body>
    
</html>

js和jquery实现tab选项卡的更多相关文章

  1. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  4. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  5. jQuery实现tab选项卡效果小demo

    html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...

  6. js 淡入淡出的tab选项卡

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  7. jquery实现Tab选项卡菜单

    效果图: 默认选中  科技                                                                                 当鼠标悬停在 ...

  8. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  9. [js高手之路]jquery插件开发实战-选项卡详解

    在jquery中,插件开发常见的有: 一种是为$函数本身扩展一个方法,这种是静态扩展(也叫类扩展),这种插件一般是工具方法, 还有一种是扩展在原型对象$.fn上面的,开发出来的插件是用在dom元素上面 ...

随机推荐

  1. 二分查找和hash查找

    转载:http://blog.csdn.net/feixiaoxing/article/details/6844723 无论是数据库,还是普通的ERP系统,查找功能数据处理的一个基本功能.数据查找并不 ...

  2. iPhone（iOS设备） 无法更新或恢复时， 如何进入恢复模式

    在更新或恢复 iPhone  时,如果遇到以下所列问题之一.可能就要将设备置于恢复模式,并尝试重新恢复设备. 设备不断地重新启动,但从未显示主屏幕. 无法完成更新或恢复,且 iTunes 不再能识别设 ...

  3. [原]Water Water Union-Find Set &amp; Min-Spanning Tree Problems&#39; Set~Orz【updating...】

    [HDU] 1213 - How Many Tables [基础并查集,求父节点个数] 1856 -More is better [基础并查集,注意内存,HDU数据水了,不用离散化,注意路径压缩的方式 ...

  4. [原]最短路专题【基础篇】（updating...）

    hud1548 a strange lift  最短路/bfs  题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1548 题意:一个奇怪的电梯,每层楼的 ...

  5. [HDOJ4325]Flowers（树状数组 离散化）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4325 关于离散化的简介:http://blog.csdn.net/gokou_ruri/article ...

  6. Codeforces Round #174 (Div. 1)A

    题不怎么难,按线段树的解法 就是延迟标记,更新 因为找错找了N久 记一篇吧 向下更新时把+=写成了= 还做在了2W组的数据上 那个错找得真费劲.. #include <iostream> ...

  7. Qt之HTTPS登录

    简述 HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.即HTTP ...

  8. UVa 1593 (水题 STL) Alignment of Code

    话说STL的I/O流用的还真不多,就着这道题熟练一下. 用了两个新函数: cout << std::setw(width[j]);    这个是设置输出宽度的,但是默认是在右侧补充空格 所 ...

  9. 实现图片大小的自动控制（ 图片大小控制CSS代码）

    图片大小控制CSS代码 将以下代码放到你的样式表文件中即可实现图片大小的自动控制. /*图片大小控制CSS By Tekin */img,a img{border:0;margin:0;padding ...

  10. IOS中微博正文开发步骤总结

    微博正文开发步骤总结 1.新建正文控制器,在点击首页的某一条微博时跳转过去 2.在MainController中设置导航控制器的代理,监听所有导航控制器的跳转 1> 如果即将显示的不是根控制器 ...