TAB选项卡效果制作总结 [复制链接]

<div class="template_title">
<span class="template_sign" id="H_1" onmous防止过滤请删掉eover="show_Hide('Module_22')">公司简介</span>
<span class="template_sign_1" id="H_2" o防止过滤请删掉nmouseover="show_Hide('Module_19')">公司新闻</span>
<span class="template_sign_1" id="H_3" onmo防止过滤请删掉useover="show_Hide('Module_28')">行业动态</span>
<span class="template_sign_1" id="H_4" onmouseo防止过滤请删掉ver="show_Hide('Module_20')">产品展示</span>
<span class="template_sign_1" id="H_5" onmou防止过滤请删掉seover="show_Hide('Module_30')">售后服务</span>
<span class="template_more"><a id="More_id" href="/index.aspx?menuid=3&type=introduct&lanmuid=1&language=cn">more </a></span></div>
<script language=javascript>
function show_Hide(id)
  {
Module1=document.getElementById("Module_22");
Module2=document.getElementById("Module_19");
Module3=document.getElementById("Module_28");
Module4=document.getElementById("Module_20");
Module5=document.getElementById("Module_30");
H1=document.getElementById("H_1");
H2=document.getElementById("H_2");
H3=document.getElementById("H_3");
H4=document.getElementById("H_4");
H5=document.getElementById("H_5");
MoreID=document.getElementById("More_id");
    Module1.style.display="none";
    Module2.style.display="none";
    Module3.style.display="none";
    Module4.style.display="none";
    Module5.style.display="none";
    H1.className="template_sign_1";
    H2.className="template_sign_1";
    H3.className="template_sign_1";    
    H4.className="template_sign_1";
    H5.className="template_sign_1";
    switch(id)
    {
      case "Module_22":
          Module1.style.display="";
          MoreID.href="/index.aspx?menuid=3&type=introduct&lanmuid=1&language=cn";
          MoreID.target="_self";
          H1.className="template_sign";
      break;
      case "Module_19":
          Module2.style.display="";
          MoreID.href="/index.aspx?menuid=5&type=article&lanmuid=9&language=cn";
          MoreID.target="_self";
          H2.className="template_sign";
      break;
      case "Module_28":
          Module3.style.display="";
          MoreID.href="/index.aspx?menuid=5&type=article&lanmuid=10&language=cn";
          MoreID.target="_blank";
          H3.className="template_sign";
      break;
      case "Module_20":
          Module4.style.display="";
          MoreID.href="/index.aspx?menuid=4&type=product&lanmuid=6&language=cn";
          MoreID.target="_self";
          H4.className="template_sign";
      break;
      case "Module_30":
          Module5.style.display="";
          MoreID.href="/index.aspx?menuid=6&type=introduct&lanmuid=15&language=cn";
          MoreID.target="_self";
          H5.className="template_sign";
      break;
    }
  }
</script>
将以上代码粘贴到TAB模块的自定义头信息里。

这里对上面代码部分重点说明一下几个问题：
1、红色字是为了防止论坛屏蔽加上的，你必须删掉，否则出错；
2、紫色字是你想要显示的模块的ID号，其中各个模块是你事先在模块设置里添加好的，如图所示，各模块的ID号当你把鼠标放到其名称上时就自动显示出来了；



3、各选项卡的more链接地址得你自己去找了，以公司新闻为例说明找的方法：右击公司新闻--属性--有一串地址，对照橙色的部分替换成你网站上的相应地址就行了。

第三步：在模块设置------模块样式编辑下，给相应模块应用TAB样式
公司简介——模块标志：隐藏，其他保持默认。因为打开首页需要显示企业简介内容，故不用TAB样式；


公司新闻——模块标志：隐藏，模块风格：TAB样式，其他保持默认；


行业动态——模块标志：隐藏，模块风格：TAB样式，其他保持默认；
产品展示——模块标志：隐藏，模块风格：TAB样式，其他保持默认；
售后服务——模块标志：隐藏，模块风格：TAB样式，其他保持默认。
最后，修改css样式，这点我是一窍不通，所以我是下载了官方首页的css后上传上去的。（下载方法：打开官方首页，点击文件----另存为，保存类型选全部，就会保存一个网页文件和文件夹，在文件夹里能找到一个lanmu.css的css文件，把它上传到你所应用的首页模板替换原来的lanmu.css即可。我是选用的style02模板）


做完这些后，刷新一下主页，怎么样？五个TAB选项卡的效果还可以吧？

fryguy :大家同是总结前人的贴子，怎么就说明我是直接抄袭？难道上面的代码是你自己一个字一个字写出来的？ 你若真这么认为的话，ryj1976大哥不知会不会也说你在抄袭他呢？
    我们知道，pageadmin本身就是个开放式的系统，给我等pa迷带来了无尽的乐趣，并为之深深着迷，如果像你说的一样，大家使用pa系统不就都成了直接抄袭了？简直是岂有此理!
    我们使用pa建站，主要是如何利用其潜在功能去开发丰富多彩的个性网页，不管采用什么方法，利用什么代码，只要能做出我们想要的内容，我想都是广大pa迷所追求的。以前的几个TAB选项卡贴子，写的的确好，但我等不懂代码的新手就是看不懂，做不出。所以我根据前人的各个贴子，在无数次试验基础上总结并写出这个教程，旨在帮助想做出TAB选项卡的pa友方便快捷地在自己网页上实现TAB选项卡的功能，绝无抄袭某人的主观意图！

前面已经说过我是个新手，对代码一窍不通，做出来的东西肯定不尽如人意了，主要是想说清楚制作要领，抛砖引玉。请教高手，怎样才能去掉控制区和内容区之间的间隔呢？