(모바일) 좌우슬라이드 active위치
본문
<style>
div {width:100%;overflow:hidden;overflow-x:auto;}
ul {display:inline-block;text-align:left;white-space:nowrap}
ul > li {display:inline-block}
ul > li > a {display:block;color:#ccc}
ul > li.active > a {color:#000}
</style>
<div>
<ul>
<li><a href="/menu01.html">메뉴1</a></li>
.
.
.
<li><a href="/menu07.html">메뉴7</a></li>
</ul>
</div>
위에 코드처럼
메뉴1 | 메뉴2 | 메뉴3 | 메뉴4 | 메뉴5 | 메뉴6 | 메뉴7
← → 좌우로 슬라이드 되고
메뉴1~메뉴7 까지 각 파일 상단에 넣어놨는데요
(모바일이에요) 질문은
예를 들어 메뉴 6 으로 이동할 경우에
위 사진처럼 menu01.html 파일에서 menu06.html 파일로 이동 후
active 된 곳을 보여주고 싶어요
이동하면 현재는 위 사진처럼 보이니 어디에 active 에 들어온질 모르겠어서요
가능할까요 ?
답변 1
파일은 menu6로 열렸나요? 그렇다면
1. li 클래스에 active가 붙어있을꺼에요(스크립트가 작동했다면)
2. active를 시킨다음에
3. 크롬에서 f12로 찍어보시면 금방 확인될거에요
제가 질문을 잘못이해한건가요..?
액티브효과를 주고싶으신건지
액티비클래스를 못찾으시는건지
menu번호에따른 파일이 안열리시는건지..
active 는 당연히 잘 붙어있습니다.
제 말은 ,, ul 안에 있는 li 메뉴 6이 active 된 것이 보였으면 좋겠다 이거에요!
[참고] https://gahyun-web-diary.tistory.com/206
페이지 아래 결과 처럼 되어있는거에요!
var offset = $("div > ul > li.active").offset();
$('div').animate({scrollLeft : offset.left}, 100);
해결했습니다 ㅎㅎ
답변을 작성하시기 전에 로그인 해주세요.
