【京东详情页】——原生js爬坑之标签页

一、引言

要做详情页的商品评价等5个li的标签页转换，效果如下：

二、实现原理

有一个特别的地方：上面五个li，但下面只有四个容器（table/div）。

 

设计的目的：无论点哪个li，只有前四个div或table在显示或隐藏，其它三个清除。商品评价一直显示，如果点击的是商品评价的li，则前四个容器全部清除。

 

实现过程如下：

+function(){
  //获得id为product_detail下的ul下的li
  var lis=document.querySelectorAll(
    "#product_detail>ul>li"
  );
  //为每个li绑定单击事件
  for(var i=0;i<lis.length;i++){
    lis[i].addEventListener("click",
      function(e){
        e.preventDefault();
        //如果当前li的class不是current
        if(this.className!="current"){
          //获得当前li的父元素下class为current的li
          this.parentNode
            .querySelector(".current")
            .className="";
          //设置当前li为current
          this.className="current";
          //找到id为product_detail下的class为show的div/table
          var show=
            document.querySelector(
              "#product_detail>.show"
            );
          if(show!=null)
            show.className="";
          //获得当前li下的第一个子元素的href
          var href=
          this.firstElementChild.href;
          //如果有href
          if(href!=""){
            //获得href中最后一个#的位置
            var lasti=
              href.lastIndexOf("#");
            //获得#之后的内容作为id
            var id=href.slice(lasti+1);
            //获得指定id的div/table设置其显示
            document.getElementById(id)
              .className="show";
          }
        }
      }
    )
  }
}();

重要的html代码：为每一个li中的a的href命名，就以各自的容器id作为名字。

三、总结

使用href的id命名法是做标签页转换的最简单的算法。

---

 注：转载请注明出处