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. Node - EJS模板应用(node+express+ejs)

    准备工作: 工具:Webstorm 1. 新建一个文件夹为blogs(随意). 一个js文件app.js. 一个文件夹views,文件夹内一个index.ejs文件,文件夹asstes内style.c ...

  2. Hangfire 使用笔记

    “巨人们”的地址 Hangfire Mysql: https://github.com/arnoldasgudas/Hangfire.MySqlStorage 在获取set表数据的sql语句有bug ...

  3. iOS上传代码到Github平台

    对于开发人员来说,很多时候想把自己好的代码 demo放到一个公共平台,与大家交流,Github就是一个不错的平台,下面给大家说说Github的具体使用方法. 第一步.申请Github账号.https: ...

  4. STM32F4时钟配置分析

    //学习STM32F4的过程中关于时钟上面讲的比较好 特地转发与大家分享 STM32F4时钟设置分析 原文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环 ...

  5. 【转】简单的java缓存实现

    本文转自 http://my.oschina.net/u/866190/blog/188712 提到缓存,不得不提就是缓存算法(淘汰算法),常见算法有LRU.LFU和FIFO等算法,每种算法各有各的优 ...

  6. 关于hession 随笔

    今天遇到一个问题,纠结了很久也没有解决,情况是这样的, 我这个项目使用的是 hession  通信.我做的业务很简单,只是新加了一个接口 ,这 个接口是广告那一块的,数据库在之前的项目里面都没有使用到 ...

  7. CSS实现覆盖弹窗（效果如JQuery-UI的Dialog）

    原理:定义一个新的div用来覆盖整个页面,再把想要弹出的窗口放在这个div上面 1.定义一个div,设置其隐藏(display:none),用于覆盖整个页面,并设置其CSS属性为: #divBg { ...

  8. 前端基本知识（四）：JS的异步模式：1、回调函数；2、事件监听；3、观察者模式；4、promise对象

    JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列 ...

  9. 移动端利用rem实现自适应布局

    好久没有写博客了,刚好说说最近遇到的移动端布局问题吧. 本来一直是觉得我的页面布局能力还是不错的,当然,是相对于较基础的来说还是不错的.不过,自己写的案例终归是跟实际开发有区别的,自己写案例的是觉得这 ...

  10. C#知识整理笔记

    这里简单介绍了一些常用的属性,以及一些术语的解释和举例说明,不太全面,希望读者多多补充. 1.重载:函数名相同,参数的个数或参数类型不同; public void MyDog(string s); p ...