产品使用及交流论坛

注册

 

QQ登录

只需一步，快速开始

返回列表
发新话题 回复该主题
查看: 3473|回复: 3

TAB问题 [复制链接]

paullee
头像

  • PageAdmin熟手
  • 295
  • 506
  • 2010-08-13
1#
t T
发表于 2012-06-05 16:20 |显示全部

JS代码：
  1. //滑动门
  2. function ShowTab(Id,Boxid)
  3. {
  4.    document.getElementById("Tab_"+Id).className="template_sign_tab_over";
  5.    document.getElementById("Template_Content_"+Boxid).innerHTML=document.getElementById("Template_Content_"+Id).innerHTML;
  6. }

  8. function HideTab(Ids)
  9. {
  10.    var AIds=Ids.split(',');
  11.    for(i=0;i<AIds.length;i++)
  12.     {
  13.        document.getElementById("Tab_"+AIds[i]).className="template_sign_tab_out";
  14.        document.getElementById("Template_"+AIds[i]).style.display="none";
  15.     }
  16. }

  18. function Hide_Template(Ids)
  19. {
  20.    var AIds=Ids.split(',');
  21.    for(i=0;i<AIds.length;i++)
  22.     {
  23.        document.getElementById("Template_"+AIds[i]).style.display="none";
  24.     }
  25. }

  27. function Show_Template(Ids)
  28. {
  29.    var AIds=Ids.split(',');
  30.    for(i=0;i<AIds.length;i++)
  31.     {
  32.        document.getElementById("Template_"+AIds[i]).style.display="";
  33.     }
  34. }

  36. function Load_Template(Id,Boxid)
  37. {
  38.    document.getElementById(Boxid).innerHTML=document.getElementById("Template_Content_"+Id).innerHTML;
  39. }
复制代码
CSS代码：
  1. /*自定义-首页滑动门*/
  2. .template_sign_tab_over{float:left;display:inline;text-align:center;width:98px;height:22px;color:#003060;border-bottom: 3px solid #9F0;cursor:pointer;}
  3. .template_sign_tab_out{float:left;display:inline;text-align:center;width:98px;padding:0 0 0 0;color:#003060;border:0;border-width:0 1px 0 0;cursor:pointer;}
复制代码
自定义内容：
  1. <script type="text/javascript">
  2. Show_Template('10');
  3. HideTab('4,5,6,7,8,9');
  4. ShowTab('4','10');
  5. </script>
复制代码
自定义样式：
  1. <style type="text/css">.template_title{background:none}</style>
  2. <div class="template_title"><span id="Tab_4" class="template_sign_tab_over" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('4','10')"><a target="_blank" href="/product/category_3_5_7.html">格力中央空调</a></span> <span id="Tab_5" class="template_sign_tab_out" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('5','10')"><a target="_blank" href="/product/category_3_5_8.html">美的中央空调</a></span> <span id="Tab_6" class="template_sign_tab_out" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('6','10')"><a target="_blank" href="/product/category_3_5_36.html">大金中央空调</a></span> <span id="Tab_7" class="template_sign_tab_out" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('7','10')"><a target="_blank" href="/product/nav_3_7.html">富士通中央空调</a></span> <span id="Tab_8" class="template_sign_tab_out" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('8','10')"><a target="_blank" href="/product/nav_3_9.html">恒温恒湿机</a></span> <span id="Tab_9" class="template_sign_tab_out" onmouseover="HideTab('4,5,6,7,8,9');ShowTab('9','10')"><a target="_blank" href="/product/nav_3_10.html">地暖</a></span></div>
复制代码
隐藏所有涉及模块的默认模块标志
效果展示http://www.zlhvac.com
只是这种方法在搜索引擎抓取的快照中显示不出来，另一种显示出来的没人分享过方法
分享 转发
TOP
上一主题| 下一主题
返回列表
发新话题 回复该主题
高级编辑器高级编辑器