HTML代码

复制代码 代码如下:

<div>

<li >1</li>

<li>2</li>

<li>3</li>

</div>

<div>

<div>第一个</div>

<div>第二个</div>

<div>第三个</div>

</div>

Jquery

复制代码 代码如下:

$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});

jquery.PPXTabs.js代码

复制代码 代码如下:

/*================================================================

*Copyright 2009 PPX

*邮箱:Mr.cuix@Gmail.com

*原始版本作者:PPX 创建时间:2010-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:'tab_1_A',

hoverClass:'tab_1_B'

});

===================================

Demo

-----

<div>

<li >1</li>

<li>2</li>

<li>3</li>

</div>

<div>

<div>第一个</div>

<div>第二个</div>

<div>第三个</div>

</div>

===================================

css

-----

$().PPXTabs({ nav:'.tab li',nav_txt:'.tab_box div',selectedClass:'selected',hoverClass:'hover'});

*/

$.fn.PPXTabs=function(options){

//默认配置

var settings={

nav:'.news_title1 li',

nav_txt:'.news_list_box div',

selectedClass:'tab_1_A',

hoverClass:'tab_1_B'

};

//主函数

$(function(){

var tab_menu_li = $(settings.nav);

$(settings.nav_txt+':gt(0)').hide();

tab_menu_li.hover(function(){

//鼠标移入

$(this).removeClass(settings.hoverClass);

$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);

$(this).siblings("li").addClass(settings.hoverClass);

$(this).addClass(settings.selectedClass);

var index = tab_menu_li.index(this);

$(settings.nav_txt).eq(index).show().siblings().hide();

},function(){

//鼠标移出

$(this).removeClass(settings.selectedClass);

$(this).siblings().find("."+settings.selectedClass).removeClass(settings.selectedClass);

$(this).siblings("li").addClass(settings.hoverClass);

$(this).addClass(settings.selectedClass);

});

});

if(options){

$.extend(settings,options);

}

};