HTML结构：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选项卡封装</title>

</head>

<body>

<div class="div1" id="div1">
　　<ul class="list">
　　　　<li class="active">首页</li>
　　　　<li>第二页</li>
　　　　<li>第三页</li>
　　　　<li>第四页</li>
　　</ul>
</div>
<div class="div2" id="div2">
　　<div class="div3" style="display:block">111111</div>
　　<div class="div4">222222</div>
　　<div class="div5">333333</div>
　　<div class="div6">444444</div>
</div>

</body>
</html>

CSS样式：

*{margin:0; padding:0}
#div1{width:500px; overflow:hidden; background:#f2f2f2;}
#div1 .list{width:100%; overflow:hidden;}
#div1 .list li{width:100px; height:40px; display:block; float:left; line-height:40px; text-align:center; cursor:pointer;}
li.active{background:#F00; color:#FFF;}
#div2{width:500px; height:300px; background:#09F;}
#div2 div{width:100%; height:100%; display:none;}

#box1{width:500px; overflow:hidden; background:#f2f2f2;}
#box1 ul{width:100%; overflow:hidden;}
#box1 ul li{width:100px; height:40px; display:block; float:left; line-height:40px; text-align:center; cursor:pointer;}
#box2{width:500px; height:300px; background:#09F;}
#box2 div{width:100%; height:100%; display:none;}

原生js代码：

<script type="text/javascript">
function Tab(id,tag,evt,id2,tag2){
　　var oId = document.getElementById(id);
　　var aTag = oId.getElementsByTagName(tag);
　　var oId2 = document.getElementById(id2);
　　var aTag2 = oId2.getElementsByTagName(tag2);
　　for(var i=0;i<aTag.length;i++){
　　　　aTag[i].index = i;
　　　　aTag[i][evt] = function(){
　　　　　　for(var i=0;i<aTag.length;i++){
　　　　　　　　aTag[i].className="";
　　　　　　　　aTag2[i].style.display = "none";
　　　　　　}
　　　　　　this.className="active";
　　　　　　aTag2[this.index].style.display = "block";
　　　　}
　　}
}
Tab('div1','li','onmouseover','div2','div');      //调用方法
</script>

jQuery代码：

<script type="text/javascript">
function fnTab(id,element,evt,id2,element2){
　　$('#'+id).find(element)[evt](function(){
　　　　$(this).addClass('active').siblings().removeClass('active');
　　　　$('#'+id2).find(element2).eq($(this).index()).show().siblings().hide();
　　});
}
fnTab('div1','li','click','div2','div');     //调用方法
</script>

无论是javascript原生代码还是jQuery代码，都是以封装函数的形式编写，这样有利于代码的拓展性和重用，使用起来也比较方便，只需要调用这个函数即可（当然使用jQuery源码时需要先导入jQuery库）。

javascript与jQuery选项卡效果的更多相关文章

  1. 简单的jquery选项卡效果

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

  2. jquery选项卡效果

    效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  3. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  4. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  5. 使用javaScript和JQuery制作经典面试题：光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...

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

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

  7. 30个实用的jQuery选项卡/导航教程推荐

    很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果.本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助. 1. Animated Ta ...

  8. click事件和jquery选项卡

    一. click事件 实现效果是点击切换按钮,可以重复的切换背景色 <!DOCTYPE html> <html lang="en"> <head> ...

  9. 分享5种风格的 jQuery 分页效果【附代码】

    jPaginate 是一款非常精致的分页插件,提供了五种不同风格的分页效果,支持鼠标悬停翻页,快速分页功能.这款插件还提供了丰富的配置选项,你可以根据需要进行设置. 效果演示      源码下载 各个 ...

随机推荐

  1. java集合框架02——Collection架构与源码分析

    Collection是一个接口,它主要的两个分支是List和Set.如下图所示: List和Set都是接口,它们继承与Collection.List是有序的队列,可以用重复的元素:而Set是数学概念中 ...

  2. Codeforces Round #396.D

    D. Mahmoud and a Dictionary time limit per test 4 seconds memory limit per test 256 megabytes input ...

  3. Java程序测试之线程的使用

    package thread_test; class A implements Runnable { public void run() { while(true) { System.out.prin ...

  4. (三) Angular2项目框架搭建心得

    前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...

  5. Ajax原理、优缺点及应用场景

    前言 Ajax的全称为Asynchronous JavaScript And Xml,是一种web客户端与服务器端异步通信的技术,如今,可以说是web开发人员必须掌握的的一项技能了.本文讲述了Ajax ...

  6. C语言中的函数、数组与指针

    1.函数:当程序很小的时候,我们可以使用一个main函数就能搞定,但当程序变大的时候,就超出了人的大脑承受范围,逻辑不清了,这时候就需要把一个大程序分成许多小的模块来组织,于是就出现了函数概念:  函 ...

  7. Java第三天

    0.注释: 目的:方便其他人阅读理解我们的代码 三种: // 单行注释,进行解释 /**/ 多行注释 /***/ 多行注释 (/***/注释通常用于方法,函数注释,在调用写好的方法或是函数时可以通过点 ...

  8. PHP 端口号 是否 被占用 以及 解决方法

    开始---->运行---->cmd,或者是window+R组合键,调出命令窗口{PHP详尽配置环境:http://www.cnblogs.com/ordinaryk/p/6496398.h ...

  9. ES6新属性笔记

    一.destructuring--解构赋值 1.数组解构赋值 (1)完全解构 let [a,b,c] = [1,2,3];//普通 console.log(a+":"+b+&quo ...

  10. 自学html5要花多长时间

    自学html5培训课程对于没有基础的那么就需要从头开始学,主要包括以下几方面 1. PC端网页制作基础,包括css,html 2. Javascript.jquery 主要是写一些动效 3. 学习UI ...