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选项卡的效果还可以吧？

我根据前人的经验总结了一下，你倒好，直接抄袭我的。
言归正传：官方绝对不是这么做的，或者不完全是这么做的，
我的认识是：官方第一个Tab也应用了自定义模块的样式，就是那个两列并排<li>用了浮动，而大家通常第一个Tab都使用了默认风格，默认风格里是没有float:left; width:50%的。

呵呵``

怎样做没关系```

只要能用得好就行```

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

原帖由 firemedia 于 2009-9-30 21:56:00 发表 fryguy :大家同是总结前人的贴子，怎么就说明我是直接抄袭？难道上面的代码是你自己一个字一个字写出来的？ 你若真这么认为的话，ryj1976大哥不知会不会也说你在抄袭他呢？ .........

无意争论这个。。。。。。。只想互相学习。。。。不过你的确没认真看我的代码，也也没认真看官方的，更没有认真看ryj1976的代码，不然你就不会认为我抄袭ryj1976了。

好笑之极，有什么可争论的，不就是个TAB选项卡而已，少了它就没有人访问网站了吗？“潮流兴”+“心理”在作怪

TAB选项卡做得好看就好，做不好看不如不要做，楼主的演示做得很粗糙，感觉生搬硬套的，上面控制和内容区还是分开的

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

学习了

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

老兄你的帖子对我帮助太大啦。你说的这个问题我研究明白啦，就是template_box里的margin调为:0 0 0 0就OK拉。原来是0 0 10

好。做记号。

貌似有问题  而且还是大大的有 控制与内容分开不说  为什么我做的鼠标移走后再回来就什么都不显示

js没写好