【选项卡效果】很多人想要的选项卡切换效果
修改名称：[color=Red]选项卡切换效代码拓展[/color]
发布作者：[color=Red]Sivan[/color]
代码来源：[color=Red]网络[/color](异次元の世界)
发布日期：[color=Red]2008-03-01[/color]
相关网址：[color=Red][url=http://www.jayyes.cn]www.jayyes.cn[/url][/color]
[color=Red]前言：
看了论坛上选项卡的效果正式发布修改的算是静￠脉一个
但是他的修改比较复杂，而且要增加选项的话
是比较麻烦的，所以本人在这里整理发布了这个选项卡效果
特点就是修改简单，增加选项的灵活度极高(菜鸟亦可轻松修改)[/color]
效果图：
[attach]9569[/attach]
[color=Red]修改必读：[/color]
修改时一定要先备份将要修改的文件，以便恢复
修改涉及文件：
[color=Red]header.asp
common/common.js
class/cls_article.asp[/color]
增加文件：
[color=Red]MyStyles.css
images/mytoolbar[/color](文件夹)
修改步骤：
[color=Red]第一步：[/color]
打开根目录下的header.asp文件
在[code]</head>[/code]之前加入：[code] <link rel="stylesheet" rev="stylesheet" href="MyStyles.css" type="text/css" media="all" />[/code][color=Red]第二步：[/color]
打开common/common.js文件
在最底部加入：
[color=Red][code]/*选项卡 by Sivan*/
function selectTag(showContent,selfObj){
var tabtag = document.getElementById("tabtags").getElementsByTagName("li");
var tabtaglength = tabtag.length;
for(i=0; i<tabtaglength; i++){
tabtag[i].className = "";
}
selfObj.parentNode.className = "selectTag";
for(i=0; j=document.getElementById("tabtagContent"+i); i++){
j.style.display = "none";
}
document.getElementById(showContent).style.display = "block";
}[/code][/color]
[color=Red]第三步：[/color]
打开class/cls_article.asp
找到从[code]<div class="Content-body">[/code]到[code]<div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: <%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>
</div></div>
</div>[/code]替换成(由于编辑帖子的时候比较粗心搞错了两个地方，感谢[color=Red]无心[/color]的提醒)：
[color=Red][code] <div class="Content-body">
<div id="con" align='left'>
<ul id="tabtags">
<li><a href="javascript:void(0)" onmousemove="selectTag('tabtagContent0',this)">标题一</a></li>
<li class="selectTag"><a href="javascript:void(0)" onmousemove="selectTag('tabtagContent1',this)">标题二</a></li>
<li><a href="javascript:void(0)" onmousemove="selectTag('tabtagContent2',this)">标题三</a></li>
<li><a href="javascript:void(0)" onmousemove="selectTag('tabtagContent3',this)">标题四</a></li>
</ul>
<div id="tabtagContent">
<div id="tabtagContent0" class="tabtagContent">内容一
</div>
<div id="tabtagContent1" class="tabtagContent selectTag">内容二
</div>
<div id="tabtagContent2" class="tabtagContent">内容三
</div>
<div id="tabtagContent3" class="tabtagContent">内容四
</div>
</div>
</div>
</div>
</div>[/code][/color]
[color=Red]第四步：[/color]
将压缩包内的MyStyles.css放到blog根目录下
注意：如果根目录下已经有MyStyles.css文件的话
请打开你之前的MyStyles.css
在最后面加上：[color=Red][code]/*选项卡Tab样式 by Sivan*/
ol li { margin:8px}
#con { font-size:12px; width:100%; margin:0 auto}
#tabtags { height:23px; width:100%; margin:0; padding:0; margin-left:10px}
#tabtags li { float:left; margin-right:1px; background:url(images/MyToolBar/tagleft.gif) no-repeat left bottom; height:23px; list-style-type:none}
#tabtags li a { text-decoration:none; float:left; background:url(images/MyToolBar/tagright.gif) no-repeat right bottom; height:23px; padding:0px 10px; line-height:23px; color:#999}
#tabtags li.emptyTag { width:4px; background:none}
#tabtags li.selectTag { background-position: left top; position:relative; height:25px; margin-bottom:-2px}
#tabtags li.selectTag a { background-position: right top; color:#000; height:25px; line-height:25px;}
#tabtagContent { padding:1px; background-color:#fff; border:1px solid #aecbd4;}
.tabtagContent { background:url(images/MyToolBar/bg.gif) repeat-x; padding:10px; color:#474747; width:100%-20px; display:none}
#tabtagContent div.selectTag{ display:block}[/code][/color]
[color=Red]第五步：[/color]
将压缩包内的images/mytoolbar文件夹移动到你blog根目录下的images文件夹内
或直接把压缩包内的images覆盖blog根目录下的images文件夹即可
[color=Red]附加说明：[/color]
在第三步代码里如果你最终要实现默认第一个显示的选项卡是第二个或是第三个的话
把相应的[color=Red]<li>[/color]改成[color=Red]<li class="selectTag">[/color]
然后在相应的[color=Red]<div id="tabtagContent" class="tabtagContent">[/color]
里面的[color=Red]class="tabtagContent"[/color]改成[color=Red]class="tabtagContent selectTag"[/color]就可以了
为了好理解我这里的代码改成了第二个标题内容为默认显示的
[color=Red][size=6][b]OK!修改完毕，enjoy it![/b][/size][/color]
[color=Red]我给的一些内容参数[/color](在“[color=Red]内容[/color]”那里添加)：
[color=Red]1.wbc的相关日志[/color](条件是先前已经装上了wbc的相关日志)
代码：[code]<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>相关日志:</strong>
<div class="Content-body" id="wbc_tag"></div>[/code][color=Red]2.日志的基本信息：[/color][code]<%if len(log_ViewArr(16,0))>0 then response.write (log_ViewArr(16,0)&"
")%>
<img src="images/From.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>文章来自:</strong> <a href="<%=log_ViewArr(17,0)%>" target="_blank"><%=log_ViewArr(18,0)%></a>
<img src="images/icon_trackback.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>引用通告:</strong> <a href="<%="trackback.asp?tbID="&id&"&action=view"%>" target="_blank">查看所有引用</a> | <a href="javascript:;" title="获得引用文章的链接" onclick="getTrackbackURL(<%=id%>)">我要引用此文章</a>
<%dim getTag
set getTag=new tag
%>
<img src="images/tag.gif" style="margin:4px 2px -4px 0px" alt=""/><strong>Tags:</strong> <%=getTag.filterHTML(log_ViewArr(19,0))%>
<div class="Content-bottom"><div class="ContentBLeft"></div><div class="ContentBRight"></div>评论: <%=log_ViewArr(12,0)%> | 引用: <%=log_ViewArr(13,0)%> | 查看次数: <%=log_ViewArr(4,0)%>
</div>[/code][color=Red]3.转载声明[/color](版权声明)：[code] <font color=#3089CA><b>转载声明:
转载此文请注明转载自:</b>
</font>
<font color=#cc3300><%=(SiteURL&"article.asp?id="&id)%></font>[/code][color=Red]这个选项卡的js和我发表的鼠标提示个性化修改：
[url=http://bbs.pjhome.net/thread-31142-1-1.html][size=6]http://bbs.pjhome.net/thread-31142-1-1.html[/size][/url]
存在着冲突，两个共存的话只有鼠标提示个性化正常而选项卡就失效了
还望懂javascript的能帮助解决一下！[/color]
[[i] 本帖最后由 jayyes 于 2008-3-31 21:22 编辑 [/i]]
