zoukankan      html  css  js  c++  java
  • 【京东详情页】——原生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命名法是做标签页转换的最简单的算法。


     注:转载请注明出处

  • 相关阅读:
    webstorm实现手机预览页面
    git 远端版本回退
    Vue开发中的移动端适配(px转换成vw)
    测试web-view,实现小程序和网页之间的切换
    mysql 字符集研究
    Openssl
    Android Activity 去掉标题栏及全屏显示
    Android中的 style 和 theme
    Android sharedPreferences 用法
    Vim 字符集问题
  • 原文地址:https://www.cnblogs.com/ljq66/p/7572217.html
Copyright © 2011-2022 走看看