jQuery实现tab切换
类别:Web前端 浏览量:434
时间:2014-12-7 jQuery实现tab切换
jQuery实现tab切换一、实现tab切换的jQuery插件代码
(function($) {
$.extend($.fn, {
aspxtabs: function(settings) {
var args = $.extend({
focusClass: "focus"
},
settings);
var tabs = $(this).find("ul").first().children("li");
var $currentPanel = null;
var $currentTab = null;
tabs.each(function(index) {
if (index == 0) {
$currentTab = $(this);
$currentTab.addClass(args.focusClass);
$currentPanel = $("#" + $(this).attr("panel"));
$currentPanel.show();
} else {
$("#" + $(this).attr("panel")).hide();
}
$(this).hover(function() {
if ($(this).attr("panel") != $currentPanel.attr("id")) {
$currentTab.removeClass(args.focusClass);
$currentTab = $(this);
$currentTab.addClass(args.focusClass);
$currentPanel.hide();
$currentPanel = $("#" + $(this).attr("panel"));
$currentPanel.show();
}
});
});
}
});
})(jQuery);
二、tab切换实例
1、效果图
2、html页面
<li id="downTab" class="r_column">
<li class="r_310title">
<h1>浏览排行</h1>
<ul>
<li panel="down1"><a href="javascript:void(0)">本周</a></li>
<li panel="down2"><a href="javascript:void(0)">本月</a></li>
</ul>
</li>
<li class="r_downlist">
<li id="down1">
<dl>
<dt>jquery.ajax error 如何调试错误
</dt>
<dd> <span>[5103]</span>
</dd>
<dt>什么是jsonp格式
</dt>
<dd> <span>[3656]</span>
</dd>
<dt>jquery中append和appendto的区别
</dt>
<dd> <span>[1478]</span>
</dd>
<dt>jQuery对象和DOM的相互转换
</dt>
<dd> <span>[1218]</span>
</dd>
<dt>js如何操作json字符串
</dt>
<dd> <span>[1086]</span>
</dd>
<dt>jQuery如何跳出each循环
</dt>
<dd> <span>[1020]</span>
</dd>
<dt>jQuery中noConflict()的用法
</dt>
<dd> <span>[806]</span>
</dd>
<dt>jquery如何实现倒计时
</dt>
<dd> <span>[786]</span>
</dd>
<dt>jquery图片轮播代码
</dt>
<dd> <span>[770]</span>
</dd>
<dt>jquery 选择器的用法
</dt>
<dd> <span>[749]</span>
</dd>
</dl>
</li>
<li id="down2">
<dl>
<dt>JS实现文字向下滚动
</dt>
<dd> <span>[171]</span>
</dd>
<dt>jquery鼠标滑过显示提示框
</dt>
<dd> <span>[497]</span>
</dd>
<dt>使用 iosOverlay 弹出提示信息
</dt>
<dd> <span>[347]</span>
</dd>
<dt>jquery中change()
</dt>
<dd> <span>[404]</span>
</dd>
<dt>jquery中filter
</dt>
<dd> <span>[334]</span>
</dd>
<dt>js右下角提示框
</dt>
<dd> <span>[144]</span>
</dd>
<dt>JQuery中serialize与serializeArray
</dt>
<dd> <span>[248]</span>
</dd>
<dt>ajax回调函数不执行
</dt>
<dd> <span>[428]</span>
</dd>
<dt>jquery实现在光标位置插入内容
</dt>
<dd> <span>[378]</span>
</dd>
</dl>
</li>
</li>
</li>
3、jquery插件的调用
$("#downTab").aspxtabs({ focusClass: "now" });
标签:tab切换
您可能感兴趣
- css导航条怎么做(CSS实现导航条Tab切换的三种方法介绍)
- css导航栏字怎么分开设置(纯CSS实现导航栏Tab切换效果)
- jQuery实现tab切换
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- 鱼竿 夏钓短,冬钓长 ,一定是这样 认清优缺点在选竿(鱼竿夏钓短冬钓长)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
热门推荐
- dedecms更新后设置空白(Dedecms去掉URL中a目录的方法)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- MySQL SQL Assistant智能提示
- php如何建立一个网站(PHP利用DWZ.CN服务生成短网址)
- mysql添加数据很慢(mysql如何优化插入记录速度)
- mysql的分页原理(mysql分页的limit参数简单示例)
- mysql查看视图注释(详解MySQL的sql_mode查询与设置)
- html5页面布局框架(html5移动端自适应布局的实现)
- css有三种基本的定位机制(10个非常实用的CSS hack技术)
- mysql主从复制步骤(MySQL8 主从复制踩坑指南)