jquery tab分栏切换效果js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery tab分栏切换效果js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery tab分栏切换效果</title>
  <style type="text/css">
  .lazyContainer{
  	width:500px;
    height:400px;
    border: 1px solid #765;
    margin: 6px;
    float:left;
   position:relative;
  }
  
  </style>
  
  <link rel="stylesheet" href="css/tabTop.css" />
  <link rel="stylesheet" href="css/tabBottom.css" />
  <link rel="stylesheet" href="css/tabLeft.css" />
  <link rel="stylesheet" href="css/tabRight.css" />
  
  <script type="text/javascript" src="jquery-1.3.2.js" ></script>
  <script type="text/javascript" src="tab-0.2.js"></script>
  
  <script type="text/javascript">
    
	$().ready(function(){

	
	var tab0 =$("#container0").tab({ 
							  type:"top",
							  navigationClass:"header",
							  contentsClass:"contents",
							  activeClass:"active",
							  closable:true,
							  onClose:function(index){alert("Close tab "+index)},
							  onShow:function(index){alert("Show tab "+index)}
							 });

	 
	$("#container1").tab({ type:"bottom",
						  navigationClass:"header",
						  contentsClass:"contents",
						  activeClass:"active",
						  closable:true
						 });
					 
	 $("#container2").tab({ type:"left",
						  navigationClass:"header",
						  contentsClass:"contents",
						  activeClass:"active",
						  closable:true
						 });
	 
	 					 
		 $("#container3").tab({ type:"right",
							  navigationClass:"header",
							  contentsClass:"contents",
							  activeClass:"active",
							  closable:true
							 });
	
	$("#addTab").click(function(){
		tab0.addTab({href:"remote/contents.html"});
	});
	
	$("#disableTab").click(function(){
		tab0.disableTab(0);
	});
	
	$("#enableTab").click(function(){
		tab0.enableTab(0);
	});
	});
  </script>   
</head>
<body>

<a href="#" id="addTab">Add tab</a>
<a href="#" id="disableTab">Disable first tab</a>
<a href="#" id="enableTab">Enable first tab</a>


<div id="container0" class="lazyContainer test">
  <div class="header">
    <ul>
      <li><a href="#"><span>Tab   0</span></a></li>
      <li class="active"><a href="#"><span>Tab   1</span></a></li>
      <li><a href="#"><span>Tab   2</span></a></li>
      <li><a href="#"><span>Tab   3</span></a></li>
      <li><a href="remote/contents.html"><span>Tab   4</span></a></li>
    </ul>
  </div>
  <div>
	  <div class="contents">
	    <p> contents 0 &times;<b>&times; 	&lsaquo; &rsaquo;</b></p>
	  </div>
	  <div class="contents">
	    <p> contents 1</p>
	  </div>
	  <div class="contents">
	    <p> contents 2</p>
	  </div>
	  <div class="contents">
	    <p> contents 3</p>
	  </div>
	  <div class="contents">
	    <p> contents 4</p>
	  </div>
  </div>
</div>




<div id="container1" class="lazyContainer test">
  <div class="header">
    <ul>
      <li><a href="#"><span>Tab0</span></a></li>
      <li class="active"><a href="#"><span>Tab   1</span></a></li>
      <li><a href="#"><span>Tab   2</span></a></li>
      <li><a href="#"><span>Tab   3</span></a></li>
      <li><a href="#"><span>Tab   4</span></a></li>
      <li><a href="#"><span>Tab   5</span></a></li>
          <li><a href="#"><span>Tab   6</span></a></li>
      <li><a href="#"><span>Tab   7</span></a></li>
	</ul>
  </div>
    <div>
	  <div class="contents">
	    <p> contents 0</p>
	  </div>
	  <div class="contents">
	    <p> contents 1</p>
	  </div>
	  <div class="contents">
	    <p> contents 2</p>
	  </div>
	  <div class="contents">
	    <p> contents 3</p>
	  </div>
	  <div class="contents">
	    <p> contents 4</p>
	  </div>
	  <div class="contents">
	    <p> contents 5</p>
	  </div>
	  	  <div class="contents">
	    <p> contents 6</p>
	  </div>
	  <div class="contents">
	    <p> contents 7</p>
	  </div>
  </div>
</div>

<div id="container2" class="lazyContainer">
  <div class="header">
    <ul>
      <li><a href="#"><span>H<br/>o<br/>m<br/>e</span></a></li>
      <li class="active"><a href="#"><span>N<br/>e<br/>w<br/>s</span></a></li>
      <li><a href="#"><span>P<br/>r<br/>o<br/>d<br/>u<br/>c<br/>t<br/>s</span></a></li>
      <li><a href="#"><span>A<br/>b<br/>o<br/>u<br/>t</span></a></li>
      <li><a href="#"><span>C<br/>o<br/>n<br/>t<br/>a<br/>c<br/>t</span></a></li>
    </ul>
  </div>
  <div>
	  <div class="contents">
	    <p> contents 0</p>
	  </div>
	  <div class="contents">
	    <p> contents 1</p>
	  </div>
	  <div class="contents">
	    <p> contents 2</p>
	  </div>
	  <div class="contents">
	    <p> contents 3</p>
	  </div>
	  <div class="contents">
	    <p> contents 4</p>
	  </div>
  </div>
</div>


<div id="container3" class="lazyContainer">
  <div class="header">
    <ul>
      <li><a href="#"><span>H<br/>o<br/>m<br/>e</span></a></li>
      <li class="active"><a href="#"><span>N<br/>e<br/>w<br/>s</span></a></li>
      <li><a href="#"><span>P<br/>r<br/>o<br/>d<br/>u<br/>c<br/>t<br/>s</span></a></li>
      <li><a href="#"><span>A<br/>b<br/>o<br/>u<br/>t</span></a></li>
      <li><a href="#"><span>C<br/>o<br/>n<br/>t<br/>a<br/>c<br/>t</span></a></li>
      
    </ul>
  </div>
  <div>
	  <div class="contents">
	    <p> contents 0</p>
	  </div>
	  <div class="contents">
	    <p> contents 1</p>
	  </div>
	  <div class="contents">
	    <p> contents 2</p>
	  </div>
	  <div class="contents">
	    <p> contents 3</p>
	  </div>
	  <div class="contents">
	    <p> contents 4</p>
	  </div>
  </div>
</div>
</body>
</html>

JS代码(tab-0.2.js):

/* * Tab plugin 0.2 - jQuery plugin,* don't needs of Lazy - jQuery based framework * * @requires jQuery v 1.3 or higher * * http://lazy.sourceforge.net * http://sourceforge.net/projects/lazy * * Copyright (c) 2009 Stefano Curtoni (www.stefanocurtoni.com) * Dual licensed under the MIT and GPL licenses:* http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * * $Date:2009-12-21 * * Tab plugin creates an unobtrusive tab widget over * a HTML structure. The underlying structure has to look like the * follow:* *<div id="container"> * <div class="header"> * <ul> * <li><a href="#"><span>Tab 0</span></a></li> * <li class="active"><a href="#"><span>Tab 1</span></a></li> * <li><a href="#"><span>Tab 2</span></a></li> * </ul> * </div> * <div> * <div class="contents"> * <p> contenuto 0 &times;
	<b>&times;
	&lsaquo;
	&rsaquo;
	</b></p> * </div> * <div class="contents"> * <p> contenuto 1</p> * </div> * <div class="contents"> * <p> contenuto 2</p> * </div> * </div> *</div> * *Include in the page the plugin script:* <script type="text/javascript" src="../tab/tab-0.2.js"></script> * * and the stylesheet file that you need:*<link rel="stylesheet" href="../tab/css/tabTop.css" /> * (for top type tab panels) *<link rel="stylesheet" href="../tab/css/tabBottom.css" /> *(for bottom type tab panels) *<link rel="stylesheet" href="../tab/css/tabLeft.css" /> *(for left type panels panels) *<link rel="stylesheet" href="../tab/css/tabRight.css" /> *(for right type tabs panels) * Each anchor in the unordered list can specify a valid url address * to perform remote loading of contents * * @example $('#container').tab();
	* @desc Create a tab interface with default settings. * * @example$("#container").tab({
	* type:"top",*navigationClass:"header",*contentsClass:"contents",*activeClass:"active",*closable:true *}
);
	* * @desc Create a customized tab interface * * * @example * var tab = $("#container").tab({
	* type:"top",*navigationClass:"header",*contentsClass:"contents",*activeClass:"active",*closable:true *}
);
	* *$("#addTab").click(function(){
	*tab.addTab({
	href:"remote/contents.html"}
);
	*}
);
	* *$("#disableTab").click(function(){
	*tab.disableTab(0);
	*}
);
	* *$("#enableTab").click(function(){
	*tab.enableTab(0);
	*}
);
	* * @desc Create a customized tab interface with external controll for * add new tab,disable or enable a tab. * * * @option String type Define the position of tabs respect the contents * (top,bottom,left,right) * * @option String navigationClass Define the class name that identify navigation div * * @option String contentsClass Define the class name that identify contents div * * @option String activeClass Define the class name that identify the active tab (li element) * * @option Boolean closable Define if it's possible to remove tabs and its contents * * @option Function onShow A function to be invoked before show a tab and his contents * * @option Function onClose A function to be invoked before close a tab and his contents * * * For addTabs:* * @option Number position Define where insert the new tab * @option String href define the url of remote contents of tab() * @option String title Define the label of new tab * @option String content define the local contents * * For disableTabs * * @option Number index Specify the index of the tab to disable * * For enableTabs * * @option Number index Specify the index of the tab to enable * * @name tab * @cat Lazy/Tab * @author Stefano Curtoni (lazyframework@gmail.com) * */
(function($){
	$.extend($.fn,{
	tab:function(settings){
	//reference to actual element/elementsvar $$ = this;
	var name = 'tab';
	var settings = $$.settings = $.extend({
	// parametri del metodotype:'top',//posizione delle etichette rispettonavigationClass:"lazyTabHeader",// classe associata al div di navigazionecontentsClass:"lazyTabContents",// classe associata ai div di contenutiactiveClass:"active",//classe elemento attivolinkClass:"lazyTabLink",closeClass:"lazyTabClose",closable:false,onShow:null,onClose:null,style:null}
,{
	top:{
	positionClass:"top"}
,bottom:{
	positionClass:"bottom"}
,left:{
	positionClass:"left"}
,right:{
	positionClass:"right"}
}
[((settings||{
}
).type||'top')],settings||{
}
);
	$$.settings = settings;
	$$.addClass(name + $.capitalize(settings.type));
	init();
	//initial function for one or more elementfunction init(){
	var s = $$.settings// String labelvar typeLabel = $.capitalize(s.type);
	var message = $("<div></div>").addClass('loading').text('loading...');
	$$.scrollExist = false;
	//div di navigazione$$.navigation = $("."+(s.navigationClass),$$).addClass("lazyTabHeader"+typeLabel);
	//div di contenuti$$.contents = $("."+(s.contentsClass),$$).addClass("lazyTabContents"+typeLabel);
	$$.activeTab = $("."+(s.activeClass),$$);
	$$.activeIndex = $$.navigation.find("li").index($$.activeTab);
	$$.ulElement = $("ul",$$.navigation);
	$$.listItems = $("li",$$.navigation);
	$$.linkItems=$("a",$$.navigation).addClass(s.linkClass);
	if($$.listItems.size() != $$.contents.size()){
	alert('Error:wrong list size ');
}
$$.contents.eq($$.activeIndex).show();
	$$.bind("resize",function(){
	$$.width($$.parent().width()-$$.css('border-left-width').replace("px","")-$$.css('border-right-width').replace("px",""));
	$$.height($$.parent().height()-$$.css('border-top-width').replace("px","")-$$.css('border-bottom-width').replace("px",""));
	fixElementsSize();
	scrollHandler();
}
);
	//ie6 workaround for hover behaviour$$.listItems.hover(function(){
	if(!$(this).hasClass('disabled')){
	$(this).addClass('hover');
	return false}
}
,function(){
	if(!$(this).hasClass('disabled')){
	$(this).removeClass('hover')return false}
}
)//close tab behaviourif(s.closable){
	closeHandler();
}
fixElementsSize();
	scrollHandler();
	//inversione navigation-contents(s.type=="bottom" || s.type=="right")?reverte():null;
	//add tab$$.ulElement.bind('add',function(e,data){
	refresh();
	scrollHandler();
	//execute a costum user function}
);
	$$.listItems.bind("disable",function(){
	refresh();
	//execute a costum user function}
);
	//click event manager$$.listItems.bind("click",{
	s:s}
,function(e){
	if(!$(this).hasClass('disabled')){
	e.preventDefault();
	//execute custom function before show the panelif (typeof $$.settings.onShow == 'function'){
	$$.settings.onShow($$.navigation.find("li").index($(this)));
}
$$.activeTab.removeClass(s.activeClass);
	//update activeTab element$$.activeTab = $(this).addClass(s.activeClass);
	//update active contents$$.contents.hide();
	$$.activeIndex = $$.navigation.find("li").index($$.activeTab);
	var target = $("a",$$.activeTab).attr("href");
	if ( !/#/.test(target)){
	$$.contents.eq($$.activeIndex).html(message).show();
	$.get(target,function(data){
	$$.contents.eq($$.activeIndex).html(data);
}
);
}
else{
	$$.contents.eq($$.activeIndex).show();
}
}
}
);
}
function refresh(){
	$$.contents=$(".lazyTabContents"+$.capitalize($$.settings.type));
	$$.listItems=$("li",$$.navigation);
	$$.linkItems=$("a",$$.navigation);
}
function reverte(){
	//posiziona il div di contenuti prima del div navigationtemp=$$.contents.parent().remove();
	$$.navigation.before(temp);
}
function fixElementsSize(){
	if($$.settings.type == "top" || $$.settings.type == "bottom"){
	$$.navigation.width($$.width());
	$$.ulElement.height($$.listItems.outerHeight(true));
	$$.contents.width($$.width());
	$$.contents.height($$.height()-$$.navigation.outerHeight(true));
}
else if($$.settings.type == "right" || $$.settings.type == "left"){
	$$.ulElement.width($$.listItems.outerWidth(true));
	$$.contents.height($$.height());
	$$.contents.width($$.width()-$$.navigation.outerWidth(true));
}
}
function scrollHandler(){
	if($$.settings.type == "top" || $$.settings.type == "bottom"){
	if (getScrollWidth() > $$.width()){
	$$.ulElement.addClass('lazyTabScroll');
	if(!$$.scrollExist){
	var scrollCtrlLeft = $('<div></div>').addClass('scrollLeft').height($$.ulElement.innerHeight()).mousedown(function(){
	$$.ulElement.animate({
	left:"0"}
,"slow");
}
).mouseup(function(){
	$$.ulElement.stop();
}
);
	var scrollCtrlRight = $('<div></div>').addClass('scrollRight').height($$.ulElement.innerHeight()).mousedown(function(){
	$$.ulElement.animate({
	left:"-"+getScrollDeltaX()+"px"}
,"slow");
}
).mouseup(function(){
	$$.ulElement.stop();
}
);
	$$.navigation.prepend(scrollCtrlLeft);
	$$.navigation.append(scrollCtrlRight);
	$$.scrollExist=true;
}
else{
	$('.scrollLeft',$$.navigation).show();
	$('.scrollRight',$$.navigation).show();
}
}
}
else if($$.settings.type == "right" || $$.settings.type == "left"){
	if (getScrollHeight() > $$.height()){
	$$.ulElement.addClass('lazyTabScroll');
	if(!$$.scrollExist){
	var scrollCtrlTop = $('<div></div>').addClass('scrollTop').width($$.ulElement.innerWidth()).mousedown(function(){
	$$.ulElement.animate({
	top:"0"}
,"slow");
}
).mouseup(function(){
	$$.ulElement.stop();
}
);
	var scrollCtrlBottom = $('<div></div>').addClass('scrollBottom').width($$.ulElement.innerWidth()).mousedown(function(){
	$$.ulElement.animate({
	top:"-"+getScrollDeltaY()+"px"}
,"slow");
}
).mouseup(function(){
	$$.ulElement.stop();
}
);
	$$.navigation.prepend(scrollCtrlTop);
	$$.navigation.append(scrollCtrlBottom);
	$$.scrollExist=true}
else{
	$('.scrollTop',$$.navigation).show();
	$('.scrollBottom',$$.navigation).show();
}
}
}
}
function getScrollWidth(){
	var labelWidth=0;
	$$.listItems.each(function(){
	labelWidth+=$(this).outerWidth(true)}
);
	return labelWidth;
}
function getScrollHeight(){
	var labelHeight=0;
	$$.listItems.each(function(){
	labelHeight+=$(this).outerHeight(true)}
);
	return labelHeight}
function getScrollDeltaX(){
	return getScrollWidth()-$$.navigation.innerWidth()+36;
}
function getScrollDeltaY(){
	return getScrollHeight()-$$.navigation.innerHeight()+36;
}
function closeHandler(){
	var closeLink = $('<a href="#"></a>').addClass($$.settings.closeClass);
	$$.listItems.append(closeLink);
	//close action manager$('.'+$$.settings.closeClass,$$).click(function(){
	// find the tab indexvar index = $$.listItems.index($(this).parent());
	if (typeof $$.settings.onClose == 'function'){
	$$.settings.onClose(index);
}
if(!$$.listItems.eq(index).hasClass('disabled')){
	//trigger remove event$(this).trigger('remove');
	// remove element from the lists$$.listItems.eq(index).remove();
	$$.contents.eq(index).remove();
	if ($$.activeIndex = index){
	$$.activeIndex = 0;
	$$.listItems.eq($$.activeIndex).trigger('click');
}
//scroll controllif($$.settings.type == "top" || $$.settings.type == "bottom"){
	var labelWidth=getScrollWidth();
	if (labelWidth < $$.width()){
	$('.scrollLeft',$$.navigation).hide();
	$('.scrollRight',$$.navigation).hide();
	$$.ulElement.removeClass('lazyTabScroll');
}
}
elseif($$.settings.type == "right" || $$.settings.type == "left"){
	var labelHeight=getScrollHeight();
	if (labelHeight < $$.height()){
	$('.scrollTop',$$.navigation).hide();
	$('.scrollBottom',$$.navigation).hide();
	$$.ulElement.removeClass('lazyTabScroll');
}
}
//refresh listsrefresh();
}
return false;
}
);
}
return $$;
}
,addTab:function(addSettings){
	// define global defaults,$.fn.addTab.defaults ={
	position:null,href:"",title:"test title",content:"test contents"}
;
	var addSettings = $.extend($.extend({
}
,arguments.callee.defaults),addSettings ||{
}
);
	var position = addSettings.position == null ? position = this.listItems.index(this.listItems.filter(':last')):position = addSettings.position;
	this.activeTab.clone(true).removeClass(this.settings.activeClass).insertAfter(this.listItems.eq(position)).find('.'+this.settings.linkClass).attr('href',addSettings.href).find('span').text(addSettings.title);
	this.contents.eq(0).clone(true).html(addSettings.content).insertAfter(this.contents.eq(position));
	//fire add eventthis.ulElement.trigger('add',position);
}
,disableTab:function(index){
	if (index != this.activeIndex){
	this.listItems.eq(index).addClass('disabled').trigger('disable');
}
else{
	alert('cannot disable this tab');
}
}
,enableTab:function(index){
	this.listItems.eq(index).removeClass('disabled').trigger('enable');
}
}
);
	$.extend($,{
	capitalize:function(string){
	return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
}
}
);
}
)(jQuery);

CSS代码(tabBottom.css):

/*BOTTOM STYLE*/
.lazyTabContentsBottom{float:left;width:auto;height:auto;display:none;background-color:#F0F8FF;}
.lazyTabHeaderBottom{position:relative;width:100%;overflow:hidden;clear:left;background-color:white;padding-top:3px;border-top:1px solid #B9D3EE;}
.lazyTabHeaderBottom ul{position:relative;height:25px;/*set by javascript*/
width:5000px;padding:0 0 10px 0;background-color:#C6E2FF;border-top:1px solid #B9D3EE;font:12px sans-serif;line-height:normal;margin:0;list-style:none;}
.lazyTabHeaderBottom li{float:left;position:relative;padding:0 0 0 10px;background:url("../img/tabBottom.png") no-repeat 0 100%;margin:0 1px;}
.lazyTabHeaderBottom .lazyTabLink{float:left;display:block;width:auto;padding:0 10px 0 0;background:transparent url("../img/tabBottom.png") no-repeat 100% 100%;text-decoration:none;color:#43798B;outline:none;}
.lazyTabHeaderBottom .lazyTabLink span{padding:5px 16px 4px 0;display:block;}
.lazyTabHeaderBottom li.active{background:url("../img/tabBottomActive.png") no-repeat 0 100%;border-width:0;margin-top:-1px;display:block;font-weight:bold;}
.lazyTabHeaderBottom li.active .lazyTabLink{background:transparent url("../img/tabBottomActive.png") no-repeat 100% 100%;color:#43798B;}
.lazyTabHeaderBottom li:hover,.lazyTabHeaderBottom li.hover{background:url("../img/tabBottomHover.png") no-repeat 0 100%;color:#43798B;}
.lazyTabHeaderBottom li:hover .lazyTabLink,.lazyTabHeaderBottom li.hover .lazyTabLink{background:transparent url("../img/tabBottomHover.png") no-repeat 100% 100%;}
.lazyTabHeaderBottom a.lazyTabClose{display:block;position:absolute;float:left;right:5px;top:5px;width:16px;height:16px;background:url("../img/closebg.png") no-repeat left top;}
.lazyTabHeaderBottom li:hover .lazyTabClose:hover,.lazyTabHeaderBottom li.hover .lazyTabClose.hover{background:url("../img/closebg.png") no-repeat -15px 0px;}
.lazyTabHeaderBottom .lazyTabScroll{padding-left:17px;padding-right:17px;}
.lazyTabHeaderBottom .scrollLeft{background:#C6E2FF url(../img/arrow.png) no-repeat scroll -104px center;margin-top:3px;width:17px;height:100%;border-right:1px solid #B9D3EE;border-top:1px solid #B9D3EE;cursor:pointer;left:0;top:0;cursor:pointer;position:absolute;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderBottom .scrollRight{background:#C6E2FF url(../img/arrow.png) no-repeat scroll -40px center;margin-top:3px;width:17px;height:100%;border-left:1px solid #B9D3EE;border-top:1px solid #B9D3EE;cursor:pointer;position:absolute;right:0;top:0;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderTop .disabled{opacity:0.5;filter:alpha(opacity=50);}
.loading{border:1px solid gray;width:80px;height:40px;v-align:center;position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;background:url("../img/loading.gif") no-repeat 0 center;padding-left:31px;}

CSS代码(tabLeft.css):

/* LEFT STYLE*/
.lazyTabContentsLeft{float:left;display:block;background-color:#F0F8FF;position:relative;display:none;}
.lazyTabHeaderLeft{position:relative;top:0;left:0;background-color:#FFF;float:left;display:block;width:35px;font-size:93%;line-height:normal;height:100%;padding-right:3px;border-right:1px solid #B9D3EE;overflow:hidden;}
/*ul*/
.lazyTabHeaderLeft ul{background-color:#C6E2FF;margin:0;height:5000px;position:relative;padding-left:10px;list-style:none;border-right:1px solid #B9D3EE;font:12px sans-serif;}
.lazyTabHeaderLeft li{position:relative;background:transparent url("../img/tabLeft.png") no-repeat 0 0;margin:2px 0 0;padding:10px 0 0 0;width:100%;overflow:hidden;}
.lazyTabHeaderLeft .lazyTabLink{display:block;height:100%;background:transparent url("../img/tabLeft.png") no-repeat -120px bottom;padding:0 0 10px 0;text-decoration:none;color:#43798B;outline:none;}
.lazyTabHeaderLeft .lazyTabLink span{display:block;padding:0 5px 16px 4px;background:transparent url("../img/tabLeft.png") repeat-y -60px bottom;}
.lazyTabHeaderLeft li.active{position:relative;display:block;background-position:-180px top;padding-right:1px;margin-right:-1px;font-weight:bold;}
.lazyTabHeaderLeft li.active .lazyTabLink{background-position:-300px bottom;margin-right:-1px;}
.lazyTabHeaderLeft li.active .lazyTabLink span{background-position:-240px top;}
.lazyTabHeaderLeft li:hover,.lazyTabHeaderLeft li.hover{background-position:-180px top;color:#333;}
.lazyTabHeaderLeft li:hover .lazyTabLink,.lazyTabHeaderLeft li.hover .lazyTabLink{background-position:-300px bottom;}
.lazyTabHeaderLeft li:hover .lazyTabLink span,.lazyTabHeaderLeft li.hover .lazyTabLink span{background-position:-240px top;}
.lazyTabHeaderLeft .lazyTabClose{width:16px;height:16px;background:url("../img/closebg.png") no-repeat left top;position:absolute;left:5px;bottom:5px;}
.lazyTabHeaderLeft li:hover .lazyTabClose:hover,.lazyTabHeaderLeft li.hover .lazyTabClose.hover{background:url("../img/closebg.png") -15px 0px;}
.lazyTabHeaderLeft .lazyTabScroll{padding-top:17px;padding-bottom:17px;}
.lazyTabHeaderLeft .scrollTop{background:#C6E2FF url(../img/arrow.png) no-repeat scroll 0 center;border-right:1px solid #B9D3EE;border-bottom:1px solid #B9D3EE;height:17px;width:100%;background:cursor:pointer;left:0;top:0;cursor:pointer;position:absolute;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderLeft .scrollBottom{background:#C6E2FF url(../img/arrow.png) no-repeat scroll -60px center;border-right:1px solid #B9D3EE;border-top:1px solid #B9D3EE;height:16px;width:100%;cursor:pointer;position:absolute;left:0;bottom:0;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderTop .disabled{opacity:0.5;filter:alpha(opacity=50);}
.loading{border:1px solid gray;width:80px;height:40px;v-align:center;position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;background:url("../img/loading.gif") no-repeat 0 center;padding-left:31px;}

CSS代码(tabRight.css):

 /* RIGHT STYLE*/
.lazyTabContentsRight{float:left;width:auto;height:auto;display:none;background-color:#F0F8FF;}
.lazyTabHeaderRight{position:relative;top:0;right:0;background-color:#FFF;float:left;overflow:hidden;width:35px;font-size:93%;line-height:normal;height:100%;padding-left:3px;border-left:1px solid #B9D3EE;}
/*ul*/
.lazyTabHeaderRight ul{background-color:#C6E2FF;margin:0;height:5000px;position:relative;padding:0 10px 0 0;list-style:none;border-left:1px solid #B9D3EE;font:12px sans-serif;}
.lazyTabHeaderRight li{position:relative;background:transparent url("../img/tabRight.png") no-repeat 100% 0;margin:2px 0 0;padding:10px 0 0;width:100%;overflow:hidden;cursor:pointer;}
.lazyTabHeaderRight a.lazyTabLink{display:block;width:auto;background:transparent url("../img/tabRight.png") no-repeat 100% 100%;padding:0 0 10px 0;text-decoration:none;color:#43798B;outline:none;}
.lazyTabHeaderRight .lazyTabLink span{display:block;padding:0 4px 16px 5px;}
.lazyTabHeaderRight .active{position:relative;display:block;background:transparent url("../img/tabRightActive.png") no-repeat 100% 0;padding-left:1px;margin-left:-1px;font-weight:bold;}
.lazyTabHeaderRight li.active .lazyTabLink{background:transparent url("../img/tabRightActive.png") no-repeat 100% 100%;margin-left:-1px;}
.lazyTabHeaderRight li:hover{background:transparent url("../img/tabRightHover.png") no-repeat 100% 0;}
.lazyTabHeaderRight li:hover .lazyTabLink{background:transparent url("../img/tabRightHover.png") no-repeat 100% 100%;}
.lazyTabHeaderRight a.lazyTabClose{width:16px;height:16px;position:absolute;right:5px;bottom:5px;background:url("../img/closebg.png") no-repeat left top;}
.lazyTabHeaderRight li:hover .lazyTabClose:hover,.lazyTabHeaderRight li.hover .lazyTabClose.hover{background:url("../img/closebg.png") no-repeat -15px 0px;}
.lazyTabHeaderRight .lazyTabScroll{padding-top:17px;padding-bottom:17px;}
.lazyTabHeaderRight .scrollTop{margin-left:3px;background:#C6E2FF url(../img/arrow.png) no-repeat scroll 0 center;border-left:1px solid #B9D3EE;border-bottom:1px solid #B9D3EE;height:17px;width:100%;background:cursor:pointer;right:0;top:0;cursor:pointer;position:absolute;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderRight .scrollBottom{background:#C6E2FF url(../img/arrow.png) no-repeat scroll -60px center;border-left:1px solid #B9D3EE;border-top:1px solid #B9D3EE;margin-left:3px;height:17px;width:100%;cursor:pointer;position:absolute;right:0;bottom:0;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderTop .disabled{opacity:0.5;filter:alpha(opacity=50);}
.loading{border:1px solid gray;width:80px;height:40px;v-align:center;position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;background:url("../img/loading.gif") no-repeat 0 center;padding-left:31px;}

CSS代码(tabTop.css):

 /* LazyTab Top style*/
.lazyTabContentsTop{float:left;width:auto;height:auto;background-color:#F0F8FF;display:none;margin:0;cursor:auto;}
.lazyTabHeaderTop{position:relative;overflow:hidden;width:100%;background-color:#FFF;padding-bottom:3px;border-bottom:1px solid #B9D3EE;}
.lazyTabHeaderTop ul{position:relative;width:5000px;background-color:#C6E2FF;margin:0;border-bottom:1px solid #B9D3EE;font:12px sans-serif;padding:10px 0 0;}
.lazyTabHeaderTop li{display:block;float:left;background:transparent url("../img/tabTop.png") no-repeat 0 0;margin:0 1px;padding:0 0 0 10px;position:relative;}
.lazyTabHeaderTop .lazyTabLink{width:auto;display:block;background:transparent url("../img/tabTop.png") no-repeat right -120px;padding:0 10px 0 0;text-decoration:none;color:#43798B;outline:none;}
.lazyTabHeaderTop .lazyTabLink span{padding:4px 16px 5px 0;background:transparent url("../img/tabTop.png") repeat-x 0 -60px;display:block;}
.lazyTabHeaderTop .active{position:relative;top:1px;background:url("../img/tabTop.png") no-repeat 0 -180px;border-width:0;margin-bottom:-1px;}
.lazyTabHeaderTop .active .lazyTabLink{background:transparent url("../img/tabTop.png") no-repeat right -300px;color:#43798B;font-weight:bold;}
.lazyTabHeaderTop .active span{background:transparent url("../img/tabTop.png") repeat-x 0 -240px;padding-bottom:5px;}
.lazyTabHeaderTop li:hover,.lazyTabHeaderTop li.hover{background:transparent url("../img/tabTop.png") no-repeat 0 -360px;}
.lazyTabHeaderTop li:hover .lazyTabLink,.lazyTabHeaderTop li.hover .lazyTabLink{background:transparent url("../img/tabTop.png") no-repeat right -480px;}
.lazyTabHeaderTop li.hover span{background:transparent url("../img/tabTop.png") repeat-x 0 -420px;}
/* close button style*/
.lazyTabHeaderTop a.lazyTabClose{display:block;position:absolute;right:5px;top:5px;width:16px;height:16px;float:left;background:url("../img/closebg.png") no-repeat left top;}
.lazyTabHeaderTop li:hover .lazyTabClose:hover,.lazyTabHeaderTop li.hover .lazyTabClose.hover{background:url("../img/closebg.png") no-repeat -15px 0px;}
.lazyTabHeaderTop .lazyTabScroll{padding-left:17px;padding-right:17px;}
.lazyTabHeaderTop .scrollLeft{background:#C6E2FF url(../img/arrow.png) no-repeat scroll -104px center;border-right:1px solid #B9D3EE;border-bottom:1px solid #B9D3EE;width:17px;height:100%;background:cursor:pointer;left:0;top:0;cursor:pointer;position:absolute;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderTop .scrollRight{background:#C6E2FF url(../img/arrow.png) no-repeat -40px center;border-left:1px solid #B9D3EE;border-bottom:1px solid #B9D3EE;width:17px;height:100%;cursor:pointer;position:absolute;right:0;top:0;z-index:10;opacity:0.9;filter:alpha(opacity = 90);}
.lazyTabHeaderTop .scrollLeft:hover,.lazyTabHeaderTop .scrollLeft.hover,.lazyTabHeaderTop .scrollRight:hover,.lazyTabHeaderTop .scrollRight.hover{/*background-position:0 center;*/
}
.lazyTabHeaderTop .disabled{opacity:0.5;filter:alpha(opacity=50);}
.loading{border:1px solid gray;width:80px;height:40px;v-align:center;position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;background:url("../img/loading.gif") no-repeat 0 center;padding-left:31px;}

附件:下载该文件资源,减少时间成本(增值服务)