软件概览
The jQuery code:
// 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("<h2>新标签</h2><div>新内容</div>");
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");
});
The CSS:
@charset "utf-8";
* { margin: 0px; padding: 0px; }
body { padding:200px }
p { padding:10px }
#tabs { border:1px solid #fff; position: relative; }
#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; }
The HTML:
<div id="tabs">
<h2>每日新闻</h2>
<div>百度董事长兼CEO李彦宏在上海出席一个投资年会时表示，百度近年增加了IM、贴吧等产品，是为增加用户粘度，不偏离搜索方向，这也是百度与谷歌雅虎的区别之一。 他指出，百度的目标是提供最好方式，让人们找到信息，搜索引擎仍是最有效方式，过去一年与可预见未来，搜索都将是百度最重要业务。</div>
<h2>网络直通车</h2>
<div>3月18日消息，据国外媒体报道，Google CEO埃里克·施密特本周一表示，Google担心微软每一起像雅虎这样规模的并购交易。</div>
<h2>电影秀</h2>
<div>第二届亚洲电影大奖昨晚在香港落幕，梁朝伟凭借《色，戒》中的表演摘得影帝桂冠。</div>
<!--add new <h2>新标签</h2> <div>内容</div> here!-->
</div>