• <!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. 卷积神经网络CNN全面解析

    卷积神经网络(CNN)概述 从多层感知器(MLP)说起 感知器 多层感知器 输入层-隐层 隐层-输出层 Back Propagation 存在的问题 从MLP到CNN CNN的前世今生 CNN的预测过 ...

  2. PHP高级特性一之正则表达式用法

    在PHP中,我们进行字符串处理时,能用字符串处理函数时我们当然要使用简单的字符串处理函数,但字符串处理函数的能力是有限的,所以我们就需要利用一个更强大的工具,那就是正则表达式. 简述正则表达式 正则表 ...

  3. 《Java编程那点事儿》读书笔记(七)——多线程

    1.继承Thread类 通过编写新的类继承Thread类可以实现多线程,其中线程的代码必须书写在run方法内部或者在run方法内部进行调用. public class NewThread extend ...

  4. Android开发效率—Eclipse快捷键

    很多过去使用Visual Studio开发软件的网友可能不熟悉Java开发环境,今天Android开发网告诉大家一些提高Android开发效率的Eclipse快捷键,可以有效率的帮助我们管理代码和减少 ...

  5. Java 日期 Api

    public class TimeTest { public static void main(String[] args) { Date d1 = new Date(); SimpleDateFor ...

  6. How to install ruby on mac/ change ruby source in china

    his one is tailor made for the Basix users among you. If you've been itching to try out Ruby and/or ...

  7. git cheatsheet小抄本

    https://www.kernel.org/pub/software/scm/git/docs/git.html

  8. [Swift 语法点滴]—— Struct Vs Class

    摘自:stackoverflow.com/questions/24232799/why-choose-struct-over-class Structure instances are always ...

  9. boost编译批处理脚本

    ------------buildboost.bat-------------- @REM Used to build boost lib.@REM by Rock Wang @transoft 20 ...

  10. Scala List

    1 介绍 Scala中列表List类似于数组,List所有元素都具有相同的类型,但有两个重要的区别. 首先,列表是不可变的,这意味着一个列表的元素可以不被分配来改变. 第二,列表表示一个链表,而数组平 ...