PageAdmin网站内容管理系统(CMS)交流论坛

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

一步一步教你TAB选项卡布局功能的实现(官网首页有演示) [复制链接]

1#
第一步:
网站栏目管理---模块样式设置
新建个模块样式TAB(名字自己随便取)
点击:模块设置--模块容器样式中写上Display:none;

第二步:
网站栏目设置:选择你所需建的页面,例首页。点击“栏目管理”里的模块设置进入。新建模块名称,"TAB选项卡"(名字自己随便取)
点击右边小箭头进入:选择隐藏默认模块标志。在自定义头信息里以源代码状态写入以下内容:
<script language=javascript>
function show_Hide(id)
  {
Module1=document.getElementById("Module_19");
Module2=document.getElementById("Module_20");
Module3=document.getElementById("Module_22");
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_19":
          Module1.style.display="";
          H1.className="template_sign";
          MoreID.href="/cn/article/lanmu_24_80.html";
      break;
      case "Module_20":
          Module2.style.display="";
          H2.className="template_sign";
          MoreID.href="/cn/article/lanmu_22_59.html";
      break;
      case "Module_22":
          Module3.style.display="";
          H3.className="template_sign";
          MoreID.href="/cn/introduct/lanmu_24_57.html";
      break;
    }

  }
//注释:template_sign_1和template_sign分别表示鼠标离开或经过的样式
</script>
<table height="25" cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td><span class="template_sign" id="H_1" >新闻</span></td>
            <td><span class="template_sign_1" id="H_2" >产品</span></td>
            <td><span class="template_sign_1" id="H_3" >简介</span></td>
            <td><span class="template_more"><a id="More_id" href="/cn/article/lanmu_24_80.html">more </a></span></td>
        </tr>
    </tbody>
</table>

模块的ID可以在后台鼠标移动到模块名称行上时会显示,也可以自看前台源代码中的ID。

第三步:同第二步……依次建立选项卡模块内容“新闻”、“产品”、“简介”。
并依次点击右边的小箭头进入:选择隐藏默认模块标志。在模块风格中选择“TAB”(第一步您建立的模块样式)。

OK!大功告成。。。
分享 转发
TOP
2#

不错
TOP
3#

不行啊...

不行啊.做了显示不出来....
TOP
4#

研究了两天,终于搞出来了....

研究了两天,终于搞出来了....
TOP
5#

能不能说的再详细点

照上面这么大哥说的还是做不出来啊,能不能说的再详细点,谢谢啊!
TOP
6#

做不出来,算了,俺水平太低
TOP
7#

按照您的说明操作没有成功 请问下您所说的ID 是不是那个三个19  20  22 三个地方改??
TOP
8#

对,每个模块ID要根据自己网站情况来改,ID可以把鼠标移动到后台模块名称会提示的
TOP
9#

楼上这位大哥
<script language=javascript>
function show_Hide(id)
  {
Module1=document.getElementById("Module_19");
Module2=document.getElementById("Module_20");
Module3=document.getElementById("Module_22");
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_19":
          Module1.style.display="";
          H1.className="template_sign";
          MoreID.href="/cn/article/lanmu_24_80.html";
      break;
      case "Module_20":
          Module2.style.display="";
          H2.className="template_sign";
          MoreID.href="/cn/article/lanmu_22_59.html";
      break;
      case "Module_22":
          Module3.style.display="";
          H3.className="template_sign";
          MoreID.href="/cn/introduct/lanmu_24_57.html";
      break;
    }

  }
//注释:template_sign_1和template_sign分别表示鼠标离开或经过的样式
</script>
<table height="25" cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
    <tbody>
        <tr>
            <td><span class="template_sign" id="H_1" >新闻</span></td>
            <td><span class="template_sign_1" id="H_2" >产品</span></td>
            <td><span class="template_sign_1" id="H_3" >简介</span></td>
            <td><span class="template_more"><a id="More_id" href="/cn/article/lanmu_24_80.html">more </a></span></td>
        </tr>
    </tbody>
</table>


是改
Module1=document.getElementById("Module_19");
Module2=document.getElementById("Module_20");
Module3=document.getElementById("Module_22");

还有: case "Module_19":   case "Module_20":     case "Module_22":    这六个地方吗?? 是错了还是还有别的地方要改?
麻烦您再指导详细点 我还没有搞明白!谢谢!
TOP
10#

我也想做一个
按照上面的做了怎么显示不出来
哪位大哥谁能够详细的说一下改哪些地方?
TOP
11#

作出来是啥效果啊 发个图看看呗
TOP
12#

还是没有研究出来
附件:您需要登录才可以下载或查看附件。没有帐号? 注册
确实没有刷子,混不了社会啊!麻烦大哥大姐们指导指导!
TOP
13#

xiyou同志,帮人帮到底呗

我按照你做的也是上面那位的那种效果,你图文演示,来个清楚的呗,谢谢啦
TOP
14#

这个问题高人再解答一下啦
TOP
15#

您所在的用户组无法下载或查看附件

默认是上面样式 内容都给隐藏了 鼠标移上去才显示内容,怎么把他在开始状态下就显示下面的

您所在的用户组无法下载或查看附件

第一个DIV代码为 <div id="Module_36" class="template_box_layout_left" style="width:50%;display:none;">
怎么把display:none;去掉
TOP
16#

搞定

搞定
TOP
发新话题 回复该主题