hotrank

@@ -30,26 +30,15 @@ function hotrank(page, sort, tabId, notab) {
             lazyLoad($('img.lazy'));
             $('#yoho-footer').css('position', 'static');
             $('.rank-main ul li:gt(2)').find('.item-content i').removeClass('top');
+            winH = $(window).height();
+            if ($('.rank-main').length !== 0) {
+                listTop = $('.rank-main').find('ul').offset().top;
+            }
             navSwiper = new Swiper('.s-goods-nav', {
                 grabCursor: true,
                 slidesPerView: 'auto',
                 slideElement: 'li'
             });
-
-            winH = $(window).height();
-            listTop = $('.rank-main').find('ul').offset().top;
-            $('.s-goods-nav .nav-item').each(function(index) {
-                hotnav = new Hammer($('.s-goods-nav .nav-item')[index]);
-                hotnav.on('tap', function(e) {
-                    var navItme = $('.s-goods-nav .nav-item').eq(index);
-
-                    id = navItme.data('id') ? navItme.data('id') : '';
-                    sort = navItme.data('sort') ? navItme.data('sort') : '';
-                    page = 1;
-                    notab = 1;
-                    hotrank(page, sort, id, notab);
-                });
-            });
         }
     });
 }
@@ -67,3 +56,18 @@ $(window).scroll(function () {
 
 });
 hotrank(page, sort, id, notab);
+hotnav = new Hammer(document.getElementById('hotRank'));
+hotnav.on('tap', function (e) {
+    var ev = ev || window.event;
+    var target = ev.target || ev.srcElement;
+
+    if (target.nodeName.toLowerCase() === 'span') {
+        $('.s-goods-nav .nav-item').removeClass('active');
+        target.parentNode.className = 'active ' + target.parentNode.className;
+        id = target.getAttribute('data-id') ? target.getAttribute('data-id') : '';
+        sort = target.getAttribute('data-sort') ? target.getAttribute('data-sort') : '';
+        page = 1;
+        notab = 1;
+        hotrank(page, sort, id, notab);
+    }
+})

@@ -74,7 +74,7 @@
                 overflow: hidden;
                 white-space: nowrap;
 
-                span {
+                b {
                     text-decoration: line-through;
                     color: #b0b0b0;
                     margin-left: 10rem / $pxConvertRem;
@@ -125,12 +125,20 @@
 }
 
 .s-goods-nav {
+        box-sizing:border-box;
+    -moz-box-sizing:border-box; 
+    -webkit-box-sizing:border-box; 
     overflow: hidden;
 
     li {
         margin: 0 0 0 (50rem / $pxConvertRem);
         width: auto;
-
+        height: 95%;
+        color: #999;
+        &.active{
+            color: #000;
+            border-bottom:2px solid #000;
+        }
         a {
             padding: 0;
         }

@@ -3,8 +3,8 @@
     <ul class="swiper-wrapper clearfix">
     {{# tabs}}
             {{# title}}
-                <li class="swiper-slide nav-item" data-sort="{{ params}}" data-id="{{ id}}">
-                    <span>{{ name}}</span>
+                <li class="swiper-slide nav-item">
+                    <span data-sort="{{ params}}" data-id="{{ id}}" >{{ name}}</span>
                 </li>
             {{/ title}}
     {{/ tabs}}
@@ -25,7 +25,7 @@
                             {{# active}}
                                 <p>{{.}}</p>
                             {{/ active}}
-                            <p>{{salePrice}}<span>{{price}}</span></p>
+                            <p>{{salePrice}}<b>{{price}}</b></p>
                         </div>
                      </a>
                  </li>