【技术】同页面可多次使用的jQuery tab选项卡代码

       

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>同页面可多次使用的jQuery tab选项卡代码</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

/* 本案例需要的css样式 */
ul,li{ list-style:none;}
.tab{ width:450px; margin:0 auto 50px;}
.tab-hd { background:#F93; overflow:hidden; zoom:1;}
.tab-hd li{ float:left; width:150px; color:#fff; text-align:center; cursor:pointer;}
.tab-hd li.active{ background:#F60;}
.tab-bd li{display:none; padding:20px; border:1px solid #ddd; border-top:0 none; font-size:24px;}
.tab-bd li.thisclass{ display:list-item;}

/*****************后来添加的代码****************/
.change_color1 li{
background: yellow;
}
.change_color1 li.active{
background: green;
}
.change_color2 li{
background: red;
}
.change_color2 li.thisclass{
background: blue;
}
/*****************END 后来添加的代码****************/

</style>

</head>
<body>
<h1 class="tit-h1">jQuery tab选项卡插件(可多次使用)</h1>

<div class="wrap">

<div class="tab">
<ul class="tab-hd"><li class="active">选项1</li><li>选项2</li><li>选项3</li></ul>
<ul class="tab-bd"><li class="thisclass">内容1</li><li>内容2</li><li>内容3</li></ul>
</div>

<div class="tab">
<ul class="tab-hd change_color1"><li class="active">选项4</li><li>选项5</li><li>选项6</li></ul>
<ul class="tab-bd change_color2"><li class="thisclass">内容4</li><li>内容5</li><li>内容6</li></ul>
</div>

</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
$(function(){
function tabs(tabTit,on,tabCon){
$(tabTit).children().hover(function(){
$(this).addClass(on).siblings().removeClass(on);
var index = $(tabTit).children().index(this);
$(tabCon).children().eq(index).show().siblings().hide();
});
};
tabs(".tab-hd","active",".tab-bd");
});
</script>
</body>
</html>

时间: 2024-10-04 13:16:21

【技术】同页面可多次使用的jQuery tab选项卡代码的相关文章

【前端页面优化】改善你的jQuery的25个步骤 千倍级效率提升

1.从Google Code加载jQuery Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势.它节省了你服务器上的带宽,能够很快的从Google的内容分布网络(CDN)上加载JS类库.更重要的是,如果用户访问那些发布在Google Code上的站点后它会被缓存下来. 这样做很有意义.有多少站点使用了没有被缓存的相同jQuery副本,而这些很容易做到,引入: <script type="text/jav

动态加载页面数据的小工具 javascript + jQuery (持续更新)

使用该控件,可以根据url,参数,加载html记录模板(包含json参数对应,以及具体记录位置Index根据参数描述加载对应的属性,并可以根据简单的判断分支加载对应html或者控件)至列表容器内(JQuery选择器字符串)注: 该控件在使用前需引入JQuery框架支持,使用该控件,可极大的减少Ajax列表数据动态加载开发工作的实际工作量. 使用方式: 首先,添加控件引用,并加入Jquery支持 <script src="js/jquery.js"></script&g

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

js页面滚动浮动层智能定位(jQuery)实现

///js页面滚动浮动层智能定位(jQuery)实现 ///调用:$("#popfloat").smartFloat($("#mainInfo").width() + 21); $.fn.smartFloat = function(width_p) { var position = function(element) { var top = element.position().top, pos = element.css("position")

Spark技术内幕:一个图搞定Spark到底有多少行代码

Spark1.0.0发布一个多月了,那么它有多少行代码(Line of Code, LOC)? 注:代码统计未包含测试,sample. Spark技术内幕:一个图搞定Spark到底有多少行代码

[Jquery]tab页面切换效果

思路:取得头部和内容的div,头部当前点击的高亮,其余的去除高亮,并通过index()方法获得当前点击的索引,然后内容div通过.eq(index)显示和隐藏 优化:当前做法,从第一个快速移到最后一个,中间每个内容都会相继显示出来.比较好的用户体验是,从某个标签迅速移到另一个标签,中间不想看的内容不显示出来.这就需要延迟切换效果(每次划每次加载信息,必将影响性能) 使用定时器:setTimeout(500毫秒),每次鼠标滑过的时候,先判断定时器存不存在,存在的话先清除定时器,然后开启定时器,执行

前端技术-HTML页面的加载

HTML页面的加载 HTML页面的加载实际上是基于http过程+浏览器对数据的解析渲染. http协议的请求过程是基于TCP协议的.http是要基于TCP连接基础上,简单的说,TCP单纯建立连接,不涉及任何我们需要请求的实际数据,简单的传输.http基于TCP建立的连接来收发数据,即实际应用上来的. 一个HTML页面的加载的交互流程大致如下: 0.输入URL1.解析URL2.构造并发送HTTP请求服务器的永久重定向响应(从 http://example.com 到 http://www.exam

四,真静态技术实现页面静态化

真静态技术解决了php缓存机制的缺陷,它的优点有三个:(1)减少服务器对数响应的负荷:(2)加载不用调动数据库,响应速度快:(3)便于优化引擎.但是真静态技术也存在一定缺陷.比如:(1)空间占用比较大:(2)生成的文件多了,服务器对html文件的响应负担也比较重. 一个系统使用真静态进行页面静态化,需要生成海量页面静态文件,可以考虑使用伪静态来处理.可以继续优化:

前端技术-前端页面优化

前端页面优化 时间花哪里去了? 只有10%-20%的最终用户响应时间花在了下载html文档上,其余80%-90%时间花在了下载页面的相关组件上.如:图片.Flash等. 所以主要优化: 减少http请求缓存减少文件大小:压缩文件+优化代码 健康的优化因该是根据页面的加载过程,全面的优化过程 第一步.浏览器预处理 查询Cache:读取Cache 或者发送304请求 第二步.查询DNS 优化规则--减少DNS查找 DNS缓存浏览器DNS缓存 计算机DNS缓存 服务器DNS缓存(TTL) 使用Keep