先增加一个模块,模块名称后面那个掉图标中进入,自定义头信息中制作出控制条样式,并编写JS代码来控制下面的三个模块的显示和隐藏,
再增加三个模块,把这三个模块的标题都隐藏起来。
官方网站自定义头信息中内容可以在首页源代码中看到,可以参考
<script language=javascript>
function show_Hide(id)
{
Module1=document.getElementById("Module_14");
Module2=document.getElementById("Module_15");
Module3=document.getElementById("Module_16");
H1=document.getElementById("H_1");
H2=document.getElementById("H_2");
H3=document.getElementById("H_3");
MoreID=document.getElementById("More_id");
Module1.style.display="none";
Module2.style.display="none";
Module3.style.display="none";
H1.className="template_sign_1";
H2.className="template_sign_1";
H3.className="template_sign_1";
switch(id)
{
case "Module_14":
Module1.style.display="";
H1.className="template_sign";
MoreID.href="/cn/article/lanmu_24_80.html";
break;
case "Module_15":
Module2.style.display="";
H2.className="template_sign";
MoreID.href="/cn/article/lanmu_22_59.html";
break;
case "Module_16":
Module3.style.display="";
H3.className="template_sign";
MoreID.href="/cn/introduct/lanmu_24_57.html";
break;
}
}
//注释:template_sign_1和template_sign分别表示鼠标离开或经过的样式
</script>
<div class="template_title"><span class="template_sign" id="H_1" onmouseover="show_Hide('Module_14')">升级公告</span> <span class="template_sign_1" id="H_2" onmouseover="show_Hide('Module_15')">模板速递</span> <span class="template_sign_1" id="H_3" onmouseover="show_Hide('Module_16')">系统简介</span> <span class="template_more"><a id="More_id" href="/cn/article/lanmu_24_80.html">more </a></span></div>
模块的ID可以在后台鼠标移动到模块名称行上时会显示,也可以自看前台源代码中的ID。
如果熟悉JS的话会很容易看懂,设计思路大概就这个样。