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" });