Ztabs 介绍

`// JavaScript Document
jQuery(function($){

/Ztabs函数 - By Zehee/
function Ztabs(Tid,TitleOn,Cont,M){
// Zehee - Tabs参数解释。
// Tid - 选项卡外层ID,页面中唯一的钩子。
// TitleOn - 选项卡选中时的class样式名称。
// Cont - 内容区的class样式名称。
// M - 选项之间的间距插补。
var titles = $(Tid).children(“h2”);
titles.css({cursor:”hand”,cursor:”pointer”});
$(Tid).css({position:”relative”});
titles.css({position:”absolute”,top:”0”,zoom:”100%”});
$(Tid).children(“div”).addClass(Cont).hide();
$(Tid).children(“div:first”).show();
if(!titles.hasClass(TitleOn)){
$(Tid).children(“h2:first”).addClass(TitleOn);
}
titles.each(function(){
$(this).bind(“click”,function(){ //可更换为Mouseover形式
titles.removeClass(TitleOn);
$(this).addClass(TitleOn);
$(Tid).children(“div”).hide();
$(this).next(“div”).show() // 可更换为其他动画形式
});
});
for(var i = 1;i < titles.length;i ++){
$(titles[i]).css(“left”,$(titles[i-1]).offset().left - $(Tid).offset().left +
$(titles[i-1]).width() + M + “px”)
}
}

Ztabs(“#tabs”,”on”,”cont”,28); // 在此可添加多组选项卡

/动态添加标签项示例 - By Zehee/
function Addnav(ButtId,TabId){
$(ButtId).click(function(){
$(TabId).append(“

新标签

新内容

“);
Ztabs(“#tabs”,”on”,”cont”,28);
});
}

Addnav(“#addnav”,”#tabs”);

/动态删减标签项示例 - By Zehee/
function Remnav(ButtId,TabId){
$(ButtId).click(function(){
if($(TabId).children(“h2”).length > 1){
$(TabId).children(“div:last”).remove();
$(TabId).children(“h2:last”).remove();
}
Ztabs(“#tabs”,”on”,”cont”,28);
});
}

Remnav(“#remnav”,”#tabs”);

});`

`@charset “utf-8”;
* { margin: 0px; padding: 0px; }
body { padding:200px }
p { padding:10px }

tabs

tabs h2 { border:1px solid #ccc; font: normal 12px/23px Arial, Helvetica,

sans-serif; height:22px; padding:0 12px; border-bottom-width:0px; color:

666666; z-index:9999; background: url(images/1_03.png) repeat-x; }

tabs .on { border-color:#86b2d1; background:url(images/0_03.png) repeat-x;

color: #024574; height:23px;_height:24px; }

tabs .cont { border:1px solid #86b2d1; margin-top:23px; padding:20px;

background:#c8e5fa; font-size: 12px; line-height: 20px; }`

<div id="tabs"> <h2>每日新闻</h2> <div>百度董事长兼CEO李彦宏在上海出席一个投资年会时表示，百度近年增加了IM、贴吧等产品，是为增加用户粘度，不偏离搜索方向，这也是百度与谷歌雅虎的区别之一。他指出，百度的目标是提供最好方式，让人们找到信息，搜索引擎仍是最有效方式，过去一年与可预见未来，搜索都将是百度最重要业务。</div> <h2>网络直通车</h2> <div>3月18日消息，据国外媒体报道，Google CEO埃里克·施密特本周一表示，Google担心微软每一起像雅虎这样规模的并购交易。</div> <h2>电影秀</h2> <div>第二届亚洲电影大奖昨晚在香港落幕，梁朝伟凭借《色，戒》中的表演摘得影帝桂冠。</div>  </div>

download:http://www.zehee.com/jQuery/Ztabs/Ztabs.rar

Ztabs 官网

http://plugins.jquery.com/project/Ztabs

Ztabs