테스트 사이트 - 개발 중인 베타 버전입니다

(모바일) 좌우슬라이드 active위치 채택완료

o3ohhh 4년 전 조회 3,402

<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></p>

<p><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개

채택된 답변
+20 포인트

파일은 menu6로 열렸나요? 그렇다면

 

1. li 클래스에 active가 붙어있을꺼에요(스크립트가 작동했다면)

2. active를 시킨다음에

3. 크롬에서 f12로 찍어보시면 금방 확인될거에요

 

제가 질문을 잘못이해한건가요..?

액티브효과를 주고싶으신건지

액티비클래스를 못찾으시는건지

menu번호에따른 파일이 안열리시는건지..

로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

o
o3ohhh
4년 전
active 는 당연히 잘 붙어있습니다.
제 말은 ,, ul 안에 있는 li 메뉴 6이 active 된 것이 보였으면 좋겠다 이거에요!
o
o3ohhh
4년 전
[참고] https://gahyun-web-diary.tistory.com/206
페이지 아래 결과 처럼 되어있는거에요!
o
o3ohhh
4년 전
var offset = $("div > ul > li.active").offset();
$('div').animate({scrollLeft : offset.left}, 100);

해결했습니다 ㅎㅎ

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인