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. asp.net core mvc剖析：KestrelServer

    KestrelServer是基于Libuv开发的高性能web服务器,那我们现在就来看一下它是如何工作的.在上一篇文章中提到了Program的Main方法,在这个方法里Build了一个WebHost,我 ...

  2. 读书笔记 effective c++ Item 16 成对使用new和delete时要用相同的形式

    1. 一个错误释放内存的例子 下面的场景会有什么错? std::]; ... delete stringArray 一切看上去都是有序的.new匹配了一个delete.但有一些地方确实是错了.程序的行 ...

  3. [Hadoop] - SSH免密码登录

    在安装hadoop之前需要进行ssh免密码登录,ssh 无密码登录要使用公钥与私钥.linux下可以用用ssh-keygen生成公钥/私钥对,下面我以Redhat为例. 我这里只采用一台机器A(10. ...

  4. win7下安装maven3.1.1

    1.下载maven的安装包,下载地址http://maven.apache.org/download.cgi ,在这个页面中,你可以选择要下载的最新版本的maven gz包.我下载的是maven3.1 ...

  5. web开发之Servlet 一

    因为最近在研究公司一套新的框架,发现这套框架的底层是对Struts2,Spring 封装后的WEB应用框架,而我发现如果仅仅是利用这个框架开发,确实很容易快速上手,做业务来说是没有问题的,但我觉得如果 ...

  6. Linux下SVN服务器搭建配置

    Linux下SVN服务器搭建配置 1.SVN服务安装 yum install subversion 2.创建SVN代码仓库 mkdir /data/svn svnadmin create /data/ ...

  7. devexpress表格gridcontrol实现列统计，总计，平均，求和等。

    1.在许多项目中,经常要实现对某些列的统计.devexpress控件gridcontrol实现这些功能只需要设置某些属性,就可以达到要求了.以下例举了一个统计班级总数,人数总计,分数总计的案例.效果图 ...

  8. gridview中后台获取某列的值

    下面的gridview中,获取某行某列的值(非模板页),如图所示 <asp:GridView AutoGenerateColumns="false" CssClass=&qu ...

  9. shell [ff: 未找到命令

    在学习shell脚本时遇到一个问题:  [ff: 未找到命令 相信很多初学者都会遇到,再次说明一下,希望对大家有所帮助: shell脚本代码如下: #!/bin/bash echo -n " ...

  10. 用C#来学习唐诗三百首

    Begin 最近把项目做完了,闲来无事,就想做点好玩的事情,刚好前几天下载了[唐诗三百首]和[全唐诗]这两个txt文件,正好用C#来整理一下. [唐诗三百首]文件格式 [全唐诗]文件格式 目标 将每一 ...