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一维数组学习

    /* * java学习: * 一维数组的使用: 声明语法 DataType[] name 或 DataType name[]. 初始化语法 DataType[] name = new DataType ...

  2. Wpf中鼠标样式的修改，作用点修改

    最近,在做一个控件的鼠标样式,Ps加了插件,可以编辑生成.cur格式的图标. 可是,所有的改完以后,调试运行,结果发现自己制作的图标的作用点总是在左上角,而不是在"手形"图标的食指 ...

  3. Convex Hull 实现理论+自制Python代码

    Convex Hull 概述 计算n维欧式空间散点集的凸包,有很多的方法.但是如果要实现快速运算则其难点在于:如何快速判断散点集的成员是否是在凸集的内部.如果可以简化判断的运算过程,则可以极大简化迭代 ...

  4. bootstrap模态框总结

    <html lang="zh-cn"> <head> <meta charset="utf-8"> <title> ...

  5. [Kafka] - Kafka内核理解：Message

    一个Kafka的Message由一个固定长度的header和一个变长的消息体body组成 header部分由一个字节的magic(文件格式)和四个字节的CRC32(用于判断body消息体是否正常)构成 ...

  6. matlab分割背景与物体

    [name,path]=uigetfile('*.jpg;*.png;*.bmp','选择一张图片');f=imread([path name]);count = 0; T = mean2(f); d ...

  7. R系列：分词、去停用词、画词云（词云形状可自定义）

    附注:不要问我为什么写这么快,是16年写的. R的优点:免费.界面友好(个人认为没有matlab友好,matlab在我心中就是统计软件中极简主义的代表).小(压缩包就几十M,MATLAB.R2009b ...

  8. 安居客Android项目架构演进

    入职安居客三年从工程师到Team Leader,见证了Android团队一路走来的发展历程.因此有心将这些记录下来与大家分享,也算是对自己三年来一部分工作的总结.希望对大家有所帮助,更希望能得到大家宝 ...

  9. eclipse下进行spark开发（已实践）

    开发准备: jdk1.8.45 spark-2.0.0-bin-hadoop2.7(windows下和linux个留一份) Linux系统(centos或其它) spark安装环境 hadoop-2. ...

  10. Omi命令行界面omi-cli发布

    原文链接:https://github.com/AlloyTeam/omi/blob/master/docs/deep_in/cn_omi-cli.md 写在前面 通常认为,命令行界面(CLI)没有图 ...