;(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. 《Linux内核分析》第四周 扒开系统调用的“三层皮”

    [刘蔚然 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] WEEK FOUR( ...

  2. [LeetCode]题解(python):118 Pascal's Triangle

    题目来源 https://leetcode.com/problems/pascals-triangle/ Given numRows, generate the first numRows of Pa ...

  3. JMeter学习-020-JMeter 监听器之【聚合报告】错误率、吞吐量、传输速率实例计算

    上文 对聚合报告的结果字段进行了概要的讲述释义,同时对吞吐量.传输速率.分位数等进行了详细的阐述,此文针对上文中描述的吞吐量及传输速率的计算进行详细的实例计算演示. 多不闲述,直入主题! 实际操作步骤 ...

  4. 使用NSURLSession

    NSURLConnection在iOS9被宣布弃用,NSURLSession从13年发展到现在,终于迎来了它独步江湖的时代.NSURLSession是苹果在iOS7后为HTTP数据传输提供的一系列接口 ...

  5. Java学习——增强for循环、switch

    增强for循环 Java5引入了一种主要用于数组的增强型for循环. 例子 public class ForTest { public static void main(String args[]){ ...

  6. C++复现经典游戏——扫雷

    国庆小长假,当大家都去看人山人海的时候,我独自一人狂码代码.这两天想要实现的内容是Windows上的一个经典游戏——扫雷.相信90后和一些上班族对此并不陌生.然而,从win8开始,扫雷就不再是Wind ...

  7. 【转】ACM/ICPC生涯总结暨退役宣言—alpc55

    转自:http://hi.baidu.com/accplaystation/item/ca4c2ec565fa0b7fced4f811 ACM/ICPC生涯总结暨退役宣言—alpc55 前言 早就该写 ...

  8. bzoj2251 [2010Beijing Wc]外星联络

    因为n很小,所以对于串s的每一个后缀,都把其加入字典树中,并且经过一个字典树节点,该节点权值就+1. 输出时因为要字典序最小,所以字典树先走0分叉,再走1分叉,如果节点权值大于等于2就输出 代码 #i ...

  9. windows系统调用 互斥体mutex

    #include "iostream" #include "windows.h" using namespace std; class CCountUpDown ...

  10. 16. 星际争霸之php设计模式--组合模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...