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

注册

 

QQ登录

只需一步,快速开始

发新话题 回复该主题

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

17#

回复 17# maxiancheng 的帖子

可以教我做这个效果不,做了好久,做不出来
TOP
18#

顶上去!~我也是按照楼主说的做的,ID也改了,但就是鼠标经过的时候没有变化,什么原因,请教达人!~
TOP
19#

顶上去!~我也是按照楼主说的做的,ID也改了,但就是鼠标经过的时候没有变化,什么原因,请教达人!~
(每日一顶啊)
TOP
20#

研究2天了,还是没搞明白,鼠标划过去就是没反应。。。
TOP
21#

没有变化那是因为没有触发函数,这个需要看到你网站后台才知道什么问题
TOP
22#

搞了半天,没成功

发个详细的教程好不好?
TOP
23#

功能不能实现的原因终于找到了!

制作的时候对照你页面的源代码和官网的源代码,你会发现,以下这段代码根本就没有
<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>
取而代之的是在代码前加
<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="/article/lanmu_cn_24_80.html">more </a></span></div>
按照这个方法可以实现,不过页面有点乱,需要对CSS样式重新做定义,离成功不远了啊~~!
注:这里的'Module_14','Module_15','Module_16'是官方网站的ID,需要修改为你自己的ID号!
TOP
24#

新的问题又出来了,Display:none; 这个代码怎么才能去掉呢??

官方网站页面查看源代码:
<div id="Module_14" class="template_box" style="width:100%;">

本地测试的页面查看源代码:
<div id="Module_14" class="template_box_layout_left" style="width:50%;Display:none;">

在后面多了Display:none;,导致打开页面的时候,什么内容也没有,而当鼠标划过标题时才能显示出内容,望高手指点怎么修正,谢谢!!
TOP
25#

呵呵,您能做那么多竟然不会删除Display:none字符呀?如果光标在前面就按"Delete"键,如果光标在后面就按回档键(BackSpace)
TOP
26#

我是找不到<div id="Module_14" class="template_box_layout_left" style="width:50%;Display:none;">这段代码是在程序的哪个地方,怎么删呀!!!
你知道就告诉大家!
TOP
27#

呵呵,我都被您弄得糊涂了,不知道您是做到哪一步了,说实在我会做但不知如何表达出来好,操作性比较强,代码是没多少,如能看懂代码。修改成自己的是很容易的。这个是不能直接照搬的。所以得强制看代码,看到js不懂的去查看js相关资料,看到css不懂的,去查看css相关资料。看到div不懂的去查看div相关资料。直到看懂了,再来对照来做自己的就轻松了。自己做出来了相信您已大大进步了。原来鄙人是这么做的。希望对您有帮助
TOP
28#

搞了N久终于搞定 彻底明白了那句话尽信书不如无书  原来所谓教程是不可以照抄的
原帖由 pfreestar 于 2009-9-17 23:02:00 发表
呵呵,我都被您弄得糊涂了,不知道您是做到哪一步了,说实在我会做但不知如何表达出来好,操作性比较强,代码是没多少,如能看懂代码。修改成自己的是很容易的。这个是不能直接照搬的。所以得强制看代码,看到js不懂的去查看js相关资料,看到css不懂的,去查看css相关资料。看到div不懂的去查看div相关资料。直到看懂了,再来对照来做自己的就轻松了。自己做出来了相信您已大大进步了。原来鄙人是这么做的。希望对

楼上这短话深有体会   我是实在给逼急了  一个词一个词在百度上搜的  终于彻底明白了 楼主这段代码的意思
也发现了 楼主的代码中竟然没有 鼠标触发事件的代码  对了半天主页的源码发现了官方主页上有这么段属性   (就如adanty所说  55555您要早发几天帖子 我就省点力气了 )
然后加入TAB 宽度高度定义 好的,基本可以入眼了  前后两位达人发的帖子都有误导,第一位根本没有 鼠标指向时的触发事件   第2位想说这件事 举例子的时候表达错误,就像说应该把A 改成A   实在是让人看不懂

真的是尽信书不如无书  靠人终须靠己

adanty  你所问的  Display:none 如果我没理解错的话 应该是你本地测试的时候 无模块内容你看到本地代码多这个属性吧   其实另一个帖子里已经讲过这个问题   你Module_14 这个模块的设置里 风格选默认 不要选你自定义了 模块容器为  Display:none  就可以把它去掉了  就可以直接显示该模块内容了
TOP
29#

回复 30# lanbeisite 的帖子

楼上的.既然你也做出来了.能否告诉我一下.谢谢.我也想做一个.
TOP
30#

偶也只是画了个瓢  还有点小问题没解决
TOP
31#

改过后倒是可以判定鼠标划过显示内容了,不过又出现一个问题,就是每次划过标题所占用的长度都要变化,怎么改能让他不变呢,像主页那样。还有,怎么样能把tab卡的高度锁定,我现在拿一个页面测试做。tab卡显示内容个数不一样,导至每次面底都跟着动~看起来太不爽了,怎么改成和主页那一样那种子
上图:
另外把改过的代码贴上,方便比我还差的人学习:
<script language=javascript>
function show_Hide(id)
  {
Module1=document.getElementById("Module_52");
Module2=document.getElementById("Module_53");
Module3=document.getElementById("Module_54");
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_52":
          Module1.style.display="";
          H1.className="template_sign";
          MoreID.href="/cn/article/lanmu_24_80.html";
      break;
      case "Module_53":
          Module2.style.display="";
          H2.className="template_sign";
          MoreID.href="/cn/article/lanmu_22_59.html";
      break;
      case "Module_54":
          Module3.style.display="";
          H3.className="template_sign";
          MoreID.href="/cn/introduct/lanmu_24_57.html";
      break;
    }
  }
//注释:template_sign_1和template_sign分别表示鼠标离开或经过的样式
</script>
<p>
<tbody>
</tbody>
</p>
<table style="width: 266px; height: 25px" height="25" cellspacing="0" cellpadding="0" width="266" align="left" border="1">
    <tbody>
        <tr>
            <td><span class="template_sign" id="H_1" onmou删掉我seover="show_Hide('Module_52')">新闻</span></td>
            <td><span class="template_sign_1" id="H_2"  onmou删掉我seover="show_Hide('Module_52')">产品</span></td>
            <td><span class="template_sign_1" id="H_3"  onmou删掉我seover="show_Hide('Module_52')">简介</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>
<div> </div>
<p> </p>

红色的数字是你要改的ID~

发现个问题。控制鼠标划过的代码发不上来。。。。。复制后把红色的删掉我删掉
附件:您需要登录才可以下载或查看附件。没有帐号? 注册
最后编辑wizardamazon 最后编辑于 2009-09-25 09:56:15
TOP
32#

楼上朋友是好人.调试好了把经验发出来.非常感谢
TOP
发新话题 回复该主题