;(function($){

$.fn.tabso=function( options ){

   var opts=$.extend({},$.fn.tabso.defaults,options );

   return this.each(function(i){
var _this=$(this);
var $menus=_this.children( opts.menuChildSel );
var $container=$( opts.cntSelect ).eq(i); if( !$container) return; if( opts.tabStyle=="move"||opts.tabStyle=="move-fade"||opts.tabStyle=="move-animate" ){
var step=0;
if( opts.direction=="left"){
step=$container.children().children( opts.cntChildSel ).outerWidth(true);
}else{
step=$container.children().children( opts.cntChildSel ).outerHeight(true);
}
} if( opts.tabStyle=="move-animate" ){ var animateArgu=new Object(); } $menus[ opts.tabEvent]( function(){
var index=$menus.index( $(this) );
$( this).addClass( opts.onStyle )
.siblings().removeClass( opts.onStyle );
switch( opts.tabStyle ){
case "fade":
if( !($container.children( opts.cntChildSel ).eq( index ).is(":animated")) ){
$container.children( opts.cntChildSel ).eq( index ).siblings().css( "display", "none")
.end().stop( true, true ).fadeIn( opts.aniSpeed );
}
break;
case "move":
$container.children( opts.cntChildSel ).css(opts.direction,-step*index+"px");
break;
case "move-fade":
if( $container.children( opts.cntChildSel ).css(opts.direction)==-step*index+"px" ) break;
$container.children( opts.cntChildSel ).stop(true).css("opacity",0).css(opts.direction,-step*index+"px").animate( {"opacity":1},opts.aniSpeed );
break;
case "move-animate":
animateArgu[opts.direction]=-step*index+"px";
$container.children( opts.cntChildSel ).stop(true).animate( animateArgu,opts.aniSpeed,opts.aniMethod );
break;
default:
$container.children( opts.cntChildSel ).eq( index ).css( "display", "block")
.siblings().css( "display","none" );
} }); $menus.eq(0)[ opts.tabEvent ](); });
}; $.fn.tabso.defaults={
cntSelect : ".content_wrap",
tabEvent : "mouseover_on",
tabStyle : "normal",
direction : "top",
aniMethod : "swing",
aniSpeed : "fast",
onStyle : "current",
menuChildSel : "*",
cntChildSel : "*"
}; })(jQuery);
<!--tab选项卡开始-->
<div class="orders-tab color_8e flaot_left">
<ul class="tabbtn" id="orders-normaltab">
<li class="current current-left" id="orders-current"></li>
<li>借物 <span>[3]</span></li>
<li>售卖其他产品</li>
<li>发票信息</li>
</ul><!--tabbtn end-->
<div class="tabcon flaot_left" id="normalcon">
<div class="sublist sublist-orders-remark">
<div class="orders-remark">
<textarea class="orders-remark-main"></textarea>
</div>
</div><!--tabcon end-->
<div class="sublist"> </div><!--tabcon end-->
												

各种效果的tab选项卡的更多相关文章

  1. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  3. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  4. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  5. tab选项卡不同样式的效果

    一般的tab选项卡就只能两种样式,一种是选中或者是划过这个选项卡样式,一种是没选中或者没划过选项卡样式. 现在有这种需求,就是选中或划过tab选卡要不同样式.比如tab1选中或者划过是红色,tab2选 ...

  6. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  7. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  8. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  9. 工作当中实际运用(1)——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

随机推荐

  1. magento 每日新品展示

    http://blog.csdn.net/benben0503/article/details/8647020 1.创建Newarrivals.php文件: <?php /** * This i ...

  2. 微信公众平台开发(26) ACCESS TOKEN

    本文介绍微信公众平台下Access Token的概念及获取方法. 一.Access Token access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token.正常 ...

  3. CentOS 配置网络yum源

    配置网络yum源(需要保证外网开通,使用网易163提供开源镜像站) 1.下载repo文件 方法一:下载到本地windows再上传到linux服务器上: 下载地址 : http://mirrors.16 ...

  4. Spring task executor同异步

    1. spring提供了哪些任务执行器,是否有同步的任务执行器 有ThreadPoolTaskExecutor等执行器 同步可以用SyncTaskExecutor,但这个可以说不算一个线程池,因为还在 ...

  5. 管理不同版本ruby和rails的利器——rvm

    近年来,ruby on rails逐渐火了起来,我想各位码农早就耳闻,特别是那些做B/S项目的童鞋,早就想跃跃一试了. 笔者也是初次接触ruby on rails ,我想,对于初学者来说,最好的学习方 ...

  6. git的那点事---

    HEAD指向的版本就是当前版本,因此,Git允许我们在版本的历史之间穿梭,使用命令git reset --hard commit_id. 穿梭前,用git log可以查看提交历史,以便确定要回退到哪个 ...

  7. 安装第三方库出现 Python version 2.7 required, which was not found in the registry

    安装第三方库出现 Python version 2.7 required, which was not found in the registry 建立一个文件 register.py 内容如下. 然 ...

  8. 一种比较少见的C#代码段

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  9. s3c2440 移值u-boot-2016.03 第2篇 支持Nand flash启动

    1, 要求:在4K 的代码以内,完成 NOR NAND 类型判断,初始化 NAND 复制自身到 SDRAM ,重定向. 2, 在 /arch/arm/cpu/arm920t/ 文件夹里 添加一个 in ...

  10. Java在Web开发语言上败给了PHP

    PHP的主要语言开发者之一.Zend公司的创始人之一Andi Gutmans最近在blog中直言不讳地批评了Java语言.他指出,目前Java厂商试图在JVM上提供动态语言实现的路子根本不对,Java ...