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. Swift2.2 看完这篇博客 你不想懂也会懂得----二叉树

    一:初衷 我自己也好奇,为什么莫名其妙的想起写这个,其实数据里面包含的结构和逻辑我自己觉得才是最原始经典的,最近也在学swift,就向着利用swift整理一些二叉树.自己刚开始的时候也是用OC看着别的 ...

  2. Visual Studio 2017 离线安装方式

    Visual Studio, 特别是Visual Studio 2017 通常是一个在线安装程序,如果你在安装过程中失去连接,你可以遇到问题.但是,由于法律原因,微软没有提供完整的可下载的ISO镜像. ...

  3. Java初学练习答案（循环）

    /* 题目如下: 1 (for 循环)*编程找出四位整数abcd 中满足下述关系的数. (ab+cd)(ab+cd)=abcd 2 (循环)*读入一个整数n,输出如下图形 n = 3 * *** ** ...

  4. 自行搭建私有云ownCloud，启用SSL，其他配置

    ownCloud简介 ownCloud(官网)是一款开源的私有云框架,可以通过它实现个人网盘的功能,如果拥有一个性能不错的VPS,那么就可以摆脱奇慢无比的百度云等网盘啦!我花了大约一天的时间总算搭好了 ...

  5. 《剑指offer》— JavaScript（19）顺时针打印矩阵

    顺时针打印矩阵 题目描述 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打 ...

  6. Activiti工作流(二)之常用操作

    前面介绍了Activiti工作流的基本操作,但是在实际应用过程中,往往不满足项目需求,因此还需要了解一些其他的功能比如:连线.排他网关.并行网管.流程变量.个人任务及组任务的三种发布方式. 下面将介绍 ...

  7. 淘宝API调用 申请 获取session key

    在调用淘宝的API时,我们都会用到appkey,appsecret,appsession. 1.我们申请应用就会有appkey和appsecret了 2.正式环境下获取SessionKey 注意:we ...

  8. Java多线程——深入重入锁ReentrantLock

    简述 ReentrantLock 是一个可重入的互斥(/独占)锁,又称为“独占锁”. ReentrantLock通过自定义队列同步器(AQS-AbstractQueuedSychronized,是实现 ...

  9. 用smarty模板做数据实现修改、分页等功能

    先来看怎么把数据库的列表全都显示出来 还是要先建一个php文件,还有html文件,都存到相应的目录下 php文件中 <?php include("../init.inc.php&quo ...

  10. CSS,注意点！！！！！！！

    css 一.整体布局 1.创建一个html标签 2.创建三个div标签(分别是网页的头部,中间,和底部三部分) 3.一般都用class选择器 4.用css给body标签加个 margin:0(用于消除 ...