스와이프 메뉴 클릭하면 가온데 오기 중 a링크 넘어가면 on 안먹힘 채택완료

<style>

html { overflow-y: scroll; font-family: sans-serif; font-size: 16px; min-width: 320px; line-height: 1.5em; color: #333; }

body{margin:0;padding:0;}

.snbSwiper { padding: 0 3px;box-sizing: border-box;background: powderblue; }

.swiper-wrapper { box-sizing: content-box; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }

.swiper-slide { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; width: auto; }

.swiper-slide a { display: block; text-align: center; }

.swiper-slide .text { margin: 0 5px; padding: 16px 5px 8px 5px; box-sizing: border-box; position: relative; display: inline-block; height: 47px; white-space: nowrap; font-size: 1rem; line-height: 1em; color: #333; }

.on .text { color: #1b64bc; font-weight: bold; }

.on .text:after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #1b64bc; }

</style>

<div class="swiper-container snbSwiper">

<div class="swiper-wrapper">

<div class="swiper-slide"><a href="#"><span class="text">포도</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">블루베리</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">딸기</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">자두수박</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">바나나</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">망고스틴레드</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">사과</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">천도복숭아</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">수박</span></a></div>

<div class="swiper-slide"><a href="#"><span class="text">용과</span></a></div>

</div>

</div>

<script>

$(function(){

var swiper = new Swiper('.snbSwiper', {

slidesPerView: 'auto',

preventClicks: true,

preventClicksPropagation: false,

observer: true,

observeParents: true

});

var $lankTitle = $('.snbSwiper .swiper-wrapper .swiper-slide a');

$lankTitle.click(function(){

var target = $(this).parent();

$lankTitle.parent().removeClass('on')

target.addClass('on');

muCenter(target);

})

function muCenter(target){

var snbwrap = $('.snbSwiper .swiper-wrapper');

var targetPos = target.position();

var winHarf = $('body').width()/2;

var pos;

var wrapWidth=0;

snbwrap.find('.swiper-slide').each(function(){

wrapWidth += $(this).outerWidth();

})

if ((targetPos.left + target.outerWidth()/2) <= winHarf) { // left

pos = 0;

}else if ((wrapWidth - targetPos.left - target.outerWidth()/2) <= winHarf) { //right

pos = wrapWidth-$('body').width();

}else {

pos = targetPos.left - winHarf + (target.outerWidth()/2);

}

setTimeout(function(){snbwrap.css({

"transform": "translate3d("+ (pos*-1) +"px, 0, 0)",

"transition-duration": "500ms"

})}, 200);

}

})

</script>

구글 서칭중 웹밤바님의 티스토리 블로그에서 스와이프 메뉴 클릭하면 가운데오기 소스를 발견했는데요

모바일 서브메뉴에 적용하려니 a링크의 #일때는 메뉴 구현이 정상적으로 되는데 링크를 넣으니 active가 안먹히더라구요.. 이런 경우에는 어떤 것을 봐야할까요? 주소값이 넘어가면서 리셋되는것 같은데...