基于Jquery的简单&简陋Tabs插件代码

2016-02-19 14:13 2 1 收藏

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐基于Jquery的简单&简陋Tabs插件代码,无聊中的都看过来。

【 tulaoshi.com - Web开发 】

HTML代码
代码如下:
div class="tab"
li class="selected" 1/li
li class="hover"2/li
li class="hover"3/li
/div
div class="tab_box"
div class="newslist"第一个/div
div class="newslist"第二个/div
div class="newslist"第三个/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 class="tab"
li class="selected" 1/li
li class="hover"2/li
li class="hover"3/li
/div
div class="tab_box"
div class="newslist"第一个/div
div class="newslist"第二个/div
div class="newslist"第三个/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);
}


};

来源:http://www.tulaoshi.com/n/20160219/1606490.html

延伸阅读
标签: Web开发
打包下载 如下图: 但是这些弹出来的窗口的样式非常的单调无法设置,并且窗口标题还根据不同的浏览器显示不同的标题内容,非常的丑陋!对于高审美观的现代人来说,就大打折扣了! jQuery现在这么流行、这么火,但网上却好像还是没有提供类似于MessageBox的插件(或者只是我没有找到而已),类似的模式窗口插件倒是有一大堆,但这都不是...
标签: Web开发
index.html 代码如下: html head titlejQuery Ajax 实例演示/title /head script src="./js/jquery.js" type="text/javascript"/script script type="text/javascript" $(document).ready(function(){//这个就是jQueryready ,它就像C语言的main 所有操作包含在它里面 $("#button_login").mousedown(function(){ login(); //点击ID...
标签: Web开发
密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,只需要很少的代码便能实现。 因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS。JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js 复制代码 代码如下: (function(...
标签: Web开发
代码如下: (function($){ $.fn.extend({ selectColor:function(){ var _d = new Date(); var _tem = _d.getTime(); return this.each(function(){ var showColor = function(_obj){ var _left = parseInt($(_obj).offset().left); var _top = parseInt($(_obj).offset().top); var _width = parseInt($(_obj).width()); var _heigh...
标签: Web开发
代码如下: html head title超简单上下翻/title script type="text/javascript" src="js/jquery.js"/script /head body 简单上下翻,函数 script type="text/javascript" function UpDown(What) { var aList = $("#tab a"); var oldnode = aList.get(0); /* *获取最后一个元素三种方法 */ newnode = aList[aList.length - 1]; ...

经验教程

339

收藏

91
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部