×
  官方微博: 腾讯   新浪
ECSHOP模板 
食品保健 家居化妆 家电数码 综合通用 珠宝配饰
VIP免费模板 
家居化妆 综合通用 服装饰品 食品保健 家电数码
ECSHOP插件 
ECSHOP插件 SHOPEX插件
EC教程中心
安装使用网店运营
首页 > 二次开发教程 > ecshop商品详情页实现详细描述等信息的TAB菜单切换

帮助目录

有问必答

您可以加入我们的官方QQ群。

加入官方QQ群

可以将问题或建议反馈给我们。

提交在线客服

猜您感兴趣

ecshop商品详情页实现详细描述等信息的TAB菜单切换

网站开发中心/ 2014-11-21/ 关注人气:695

关于实现在商品详情页中商品描述、商品属性以及评论、售后服务等信息的切换,这应该是很多二次开发人员以及网页设计人员会经常遇到的问题。在这里ECSHOP网站开发中心,简单说一下怎么实现这个TAB菜单,当然除了我说的这个,还有很多种方法,我这里说仅供大家参考一下。

 

第一步:

 

我们在<head></head>中加入一个脚本代码

 

<script type="text/javascript">

function $id(element) {

  return document.getElementById(element);

}

//切屏--是按钮,_v是内容平台,_h是内容库

function reg(str){

  var bt=$id(str+"_b").getElementsByTagName("h2");

  for(var i=0;i<bt.length;i++){

    bt[i].subj=str;

    bt[i].pai=i;

    bt[i].style.cursor="pointer";

    bt[i].onclick=function(){

      $id(this.subj+"_v").innerHTML=$id(this.subj+"_h").getElementsByTagName("blockquote")[this.pai].innerHTML;

      for(var j=0;j<$id(this.subj+"_b").getElementsByTagName("h2").length;j++){

        var _bt=$id(this.subj+"_b").getElementsByTagName("h2")[j];

        var ison=j==this.pai;

        _bt.className=(ison?"":"h2bg");

      }f

    }

  }

  $id(str+"_h").className="none";

  $id(str+"_v").innerHTML=$id(str+"_h").getElementsByTagName("blockquote")[0].innerHTML;

}

</script>

 

第二步:

 

 在<div id="com_b" ><h2></h2></div>商品参数这里写标题

比如<div id="com_b" ><h2>商品描述</h2></div>

 

 

第三步:

 

<div id="com_v" class="boxCenterList RelaArticle"></div>

      <div id="com_h">

  <blockquote> (写上你想显示的内容)</blockquote>

 

</div>

 

第四步:

 

在商品详情页代码之后加上

<script type="text/javascript">

<!--

reg("com");

 //-->

</script>

 

此种方法仅供参考,本文由ECSHOP网站开发中心原创,转载请注明:ECSHOP网站开发中心www.53moban.com

分享到:
下一篇:根据用户显示器分辨率的不同调用不同css
上一篇:网站开发中心总结一些ecshop常用的SQL语句