zxd1972 - 2010/10/5 17:59:00
经过一个下午的研究,终于做出了TAB选项卡,和大家分享下:
一、定义tab.js,并拷贝到“\js”文件夹,内容如下
/* tab.js */
var Showed_TabId;
function Hide_Template(Ids)
{
var AIds=Ids.split(',');
for(i=0;i<AIds.length;i++)
{
document.getElementById("Template_"+AIds【i】).style.display="none"; 注:此处“【】”须替换为半角中括号 }
}
function Load_Template_Content(FromId,ToId)
{
document.getElementById("Template_Content_"+ToId).innerHTML=document.getElementById("Template_Content_"+FromId).innerHTML;
Showed_TabId=FromId;
}
function ShowTab(Id,ToId)
{
document.getElementById("Tab_"+Showed_TabId).className="template_tab_title_1";
document.getElementById("Tab_"+Id).className="template_tab_title";
Load_Template_Content(Id,ToId);
}
二、选中要加入TAB选项卡的栏目页,单击【局部自定义】,在“头信息自定义”添加如下代码:
<script src="/js/tab.js"></script>
三、在要加入TAB选项卡的栏目页下添加模块,并记下要通过TAB选项卡显示内容的模块ID(鼠标放置到对应栏目上,三秒后显示:“ID:Template_xx”,此处xx即为该栏目ID)
四、在该页面添加一个TAB控制模块,如:“TAB控制”,模块类型为“自定义内容”,记下该栏目ID,单击【自定义内容设置】进行【内容设置】,切换到“源代码”状态,加入如下代码:
<script language=javascript>
Hide_Template("1,2,3,4");
Load_Template_Content("1","5");
</script>
【说明】1,2,3,4 为需要在TAB选项卡中显示的4个模块,5为TAB模块ID
五、切换到【自定义样式】页,将【默认模块标志】设置为“隐藏”,进入“源代码”模式,加入以下代码:
<style type="text/css">
.template_tab_title{float:left;text-align:center;width:100px;height:21px;padding-top:5px;background:url(/images/diy/template_tab_title_over.jpg) no-repeat left bottom;font-weight:bold;color:#ffffff;cursor:pointer}
.template_tab_title_1{float:left;text-align:center;width:100px;height:21px;padding-top:5px;background:url(/images/diy/template_tab_title_out.jpg) no-repeat left bottom;cursor:pointer}
.template_tab_title_right{float:right;padding-top:5px;}</style>
<ul style="width: 100%">
<li id="Tab_1" class="template_tab_title">泸职院新闻</li>
<li id="Tab_2" class="template_tab_title_1">科研园地</li>
<li id="Tab_3" class="template_tab_title_1">学生风采</li>
<li id="Tab_4" class="template_tab_title_1">科技成果</li>
<li class="template_tab_title_right"><a href="/index.aspx?menuid=4&language=cn">更多...</a></li>
</ul>
【说明】1、1,2,3,4 为需要在TAB选项卡中显示的4个模块,5为TAB模ID
2、“template_tab_title”、“template_tab_title_1”、“template_tab_title_right”为TAB标签样式,可自行替换图片修改样式。
caobaikui - 2010/10/5 21:27:00
还是做不出来
zxd1972 - 2010/10/5 21:51:00
我以前看华仔的介绍,觉得操作都比较麻烦,我今天是找了个官方的模板研究的,这几步骤应该不是很复杂了吧,只是官网在发代码的时候有点问题,你可以去我博客看看:
http://9492901.blog.163.com/blog/static/2693340220109555812140/
caobaikui - 2010/10/6 1:40:00
又仔细参照你的弄了以下,终于成功了,谢谢。参见:
http://ysx.jsit.edu.cn
zxd1972 - 2010/10/6 8:56:00
不错的网站,到底是搞艺术的哈,同行可以加个QQ(9492901),我也是一个职业技术学院的!
brand8412 - 2010/10/25 14:14:00
做个记号,感谢分享。
LightTea - 2010/11/30 17:28:00
zxd1972 - 2010/12/6 15:37:00
不错,学习了,以后多些官方的,省去我们摸索的艰辛历程!
wjpzx - 2011/1/15 17:57:00
你 ,你的网站TAB文章两排是怎么实现的呢,能不能说一下。谢谢
hxh76620447 - 2011/1/16 12:02:00
帮顶一下,我也关注这个问题
xajhmw - 2011/6/9 11:34:00
做不出来啊:-|
jintiancaizhuce - 2011/6/9 16:09:00
什么时候的帖子了
jiacheng78 - 2011/6/10 0:22:00
做个记号,感谢分享。
hkaimy - 2011/7/19 16:08:00
样子是做出来了 但是鼠标移上去没反应,哪里出了错?
lzy339 - 2012/4/11 13:58:00
样子是做出来了 但是鼠标移上去没反应,哪里出了错?
最后自己下了个模版研究出来了!!!
http://art.gaedu.gov.cn/这是用最新的商业版重做的哟!
psger - 2012/6/19 18:23:00
还是没有做出来
knxmy - 2020/2/18 16:13:44
感谢楼主分享,马克一下