diff --git a/static/js/me/online-service.js b/static/js/me/online-service.js index 0e6dc95..512e95c 100644 --- a/static/js/me/online-service.js +++ b/static/js/me/online-service.js @@ -18,3 +18,10 @@ $questionTab.on('touchend', function() { $('.question-list').removeClass('current'); $(clickTab).addClass('current'); }); + +$('.yoho-page').on('touchstart', '.connect-item, .question-item', function() { + $(this).siblings().removeClass('highlight'); + $(this).addClass('highlight'); +}).on('touchend touchcancel', '.connect-item, .question-item', function() { + $(this).removeClass('highlight'); +}); diff --git a/static/sass/me/_online-service.scss b/static/sass/me/_online-service.scss index 7359914..642177f 100644 --- a/static/sass/me/_online-service.scss +++ b/static/sass/me/_online-service.scss @@ -31,6 +31,7 @@ margin: 0 rem(32); border-left: 1px solid #b0b0b0; } + } .question-list { @@ -43,15 +44,15 @@ } li { - margin-left: rem(30); - width: rem(610); font-size: rem(28); line-height: rem(90); - border-bottom: 1px solid #ccc; a { display: block; color: #444; + width: rem(610); + margin-left: rem(30); + border-bottom: 1px solid #ccc; } .iconfont { @@ -64,6 +65,10 @@ &:last-child { border-bottom: none; } + + &.highlight { + background: #eee; + } } } @@ -112,6 +117,9 @@ content: none; } } + &.highlight { + background: #eee; + } } .icon { display: inline-block; @@ -132,6 +140,7 @@ border-bottom: 1px solid #c8c7cc; color: #444; background: #fff; + &:last-child { margin-bottom: 0; } @@ -146,6 +155,7 @@ .question { @extend %qa; position: relative; + color: #000; &:after { content: ''; position: absolute;