清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注为大家准备的精彩内容。下面为大家推荐基于Jquery的简单&简陋Tabs插件代码,无聊中的都看过来。
HTML代码
代码如下:
div
li 1/li
li2/li
li3/li
/div
div
div第一个/div
div第二个/div
div第三个/div
/div
Jquery
代码如下:
$().PPXTabs({ nav:.tab li,nav_txt:.tab_box div,selectedClass:selected,hoverClass:hover});
代码
代码如下:
/*================================================================
*Copyright PPX
*邮箱:[email protected]
*原始版本作者:PPX 创建时间:-2-8 10:20
*================================================================
*参数说明
*param name="nav"导航列/param
*param name="nav_txt"导航内容/param
*param name="selectedClass"选中时的样式/param
*param name="hoverClass"经过时的样式/param
*
*默认为
*$().PPXTabs({
nav:.news_title1 li,
nav_txt:.news_list_box div,
selectedClass: ab_1_A,
hoverClass: ab_1_B
});
===================================
Demo
-----
div
li 1/li
li2/li
li3/li
/div
div
div第一个/div
div第二个/div
div第三个/div
/div
===================================
css
-----
$().PPXTabs({ nav:.tab li,nav_txt:.tab_box div,selectedClass:selected,hoverClass:hover});
*/
$.(){
//默认配置
var settings={
nav:.news_title1 li,
nav_txt:.news_list_box div,
selectedClass: ab_1_A,
hoverClass: ab_1_B
};
//主函数
$(function(){
var tab_menu_li = $(settings.nav);
$(+()).hide();
(function(){
//鼠标移入
$(this).removeClass();
$(this).siblings().find("."+).removeClass();
$(this).siblings("li").addClass();
$(this).addClass();
var index = ();
$().eq(index).show().siblings().hide();
},function(){
//鼠标移出
$(this).removeClass();
$(this).siblings().find("."+).removeClass();
$(this).siblings("li").addClass();
$(this).addClass();
});
});
if(options){
$.extend(settings,options);
}
};