jQuery插件zepto.js简单实现tab切换

  这篇文章主要介绍了jQuery插件zepto.js简单实现tab切换的代码,十分的简洁,有需要的小伙伴可以参考下

  老规矩,先贴代码

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script>
$(function(){
window.onload = function()
{
var $li = $('.taocan-title li');
var $ul = $('.taocan-content .con110');
 
$li.mouseover(function(){
var $this = $(this);
var $t = $this.index();
$li.removeClass();
$this.addClass('active');
$ul.css('display','none');
$ul.eq($t).css('display','block');
})
}
});
</script>

以上所述就是本文的全部内容了,希望大家能够喜欢。

时间: 2025-01-20 14:41:35

jQuery插件zepto.js简单实现tab切换的相关文章

jQuery插件zepto.js简单实现tab切换_jquery

老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');

JS简单实现tab切换效果的多窗口显示功能_javascript技巧

本文实例讲述了JS简单实现tab切换效果的多窗口显示功能.分享给大家供大家参考,具体如下: <div style=" text-align:center; margin-top:40px;"> <div class="menubox"> <span id="newstab1" class="hover" onmouseover="setTab('newstab',1,3)"&g

JS实现简单的tab切换选项卡效果_javascript技巧

本文实例讲述了JS实现简单的tab切换选项卡效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <m

jQuery插件bgStretcher.js实现全屏背景特效

  可以自动动态更换网页背景图片的jQuery插件bgstretcher.js,sharejs.com推荐的这个插件,可以自定义多种方式让网页背景自动切换,效果流畅,非常难得,调用代码也非常简单. bgStretcher 2011 (Background Stretcher)是一个jQuery的插件,可以为你的网页添加多张背景图,且多个背景图能够自动切换,同时背景图大小可以自适应浏览器窗口的大小.背景图的切换效果有淡入淡出,滚动,幻灯,其中选用滚动和幻灯时,可以选择方向,上下左右,或者左上右下,

jQuery实现带延迟的二级tab切换下拉列表效果_jquery

本文实例讲述了jQuery实现带延迟的二级tab切换下拉列表效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现带延时效果的下拉列表菜单,有动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-show-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q

jquery插件splitScren实现页面分屏切换模板特效

 这篇文章主要介绍了jquery插件splitScren实现页面分屏切换模板特效的相关资料,需要的朋友可以参考下     闲来无事,搞了个页面的分屏效果,先来看下效果: 出于可自定义宽高的目的,屏幕分块由CSS控制,由js控制估计等分模块效果一般. 程序相关说明: HTML结构: ? 1 2 3 4 5 6 7 8 9 <div class="header"> header </div> <div class="container" i

jquery插件NProgress.js制作网页加载进度条

  这篇文章主要介绍了jquery插件NProgress.js制作网页加载进度条的相关资料,需要的朋友可以参考下 NProgress.js是极细的纳米级进度条,用现实的细线条动画让用户看到网页正在发生的事情! 你也许已经在 Youtube 上看过了那道红色激光脉冲,它会在你切换页面时出现.其实许多移动浏览器的进度条都是这个样式,但是在网页上实现可不多见.不过,有了 NProgress 这个 jQuery 插件,你也可以轻松实现! NProgress.js应用于复杂网页的细长进度条.由 Googl

JQuery插件ajaxfileupload.js异步上传文件实例

这篇文章主要介绍了JQuery插件ajaxfileupload.js异步上传文件实例,本文直接给出了HTML代码和JS代码以及后台处理代码,需要的朋友可以参考下     在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用:  代码如下: <scr

超棒的悬浮层式的页面元素注解jQuery插件 - Chardin.js

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 日期:2013-5-2 来源:GBin1.com 在线演示:www.gbtags.com/gb/share/887.htm 还记得我们以前分享的超酷悬浮覆盖式的注释效果吗?今天这里我们分享一个能够帮助你快速的生成类似页面注释效果的jQuery插件 - Chardin.js,使用它可以快速的帮助你生成针对页面元素的注释效果,非常适合你辅助用户了