Hello, World!
이전 목록 다음
채택완료

active 관련 질문드립니다.

다다나한포션
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전 2,694

안녕하세요.

링크를 눌러서 해당 섹션으로 도착할때

a 링크에 class="active"를 주고 싶습니다.

 

Copy 
<script>
    function fnMove(seq){
        var offset = $("#sec_0" + seq).offset();
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
</script>

 

<a href="#" onclick="fnMove('1')">테스트1</a>

<a href="#" onclick="fnMove('2')">테스트2</a>

 

<div id="sec_01">

1번

</div>

<div id="sec_01">

2번

</div>

 

이런식으로

테스트1 누르면 1번으로 

테스트2 누르면 2번으로 가게 됩니다.

 

해당 id 로 도착하면 a링크에 class="active" 가 붙게 하고 싶습니다. (색상변경때문..)

 

구글링해도 잘 나오지가 않아서요ㅠ

고수님들의 도움 부탁드립니다.....

그누보드5 php
|

답변 4개 / 댓글 5개

채택된 답변
+20 포인트
eeyekiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

Copy 
<script>

    function fnMove(seq){

        var offset = $("#sec_0" + seq).offset();

        $('html, body').animate({scrollTop : offset.top}, 400);

        $('#menu'+seq).addClass('active');

    }

</script>

 

<a href="#" onclick="fnMove('1')" id="menu1">테스트1</a>

<a href="#" onclick="fnMove('2')" id="menu2">테스트2</a>

답변에 대한 댓글 3개

다나한포션
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
감사합니다. 정말 잘됩니다. ㅠ

혹시 염치없지만 한가지 더 여쭙니다..

클릭해서 해당 섹션으로 갔을때 active가 아주 잘 되는데
클릭하지 않고
마우스 드래그 해서 해당 섹션으로 갔을때도 active 기능이 될런지요
eyekiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
그건 css 에서 :hover 를 설정해주면 됩니다.
https://dasima.xyz/css-hover-%ED%9A%A8%EA%B3%BC-%EC%A0%95%EB%A6%AC/
eyekiss
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
도움 되셨으면 답변 채택 바랍니다.
예뜨락
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

혹시 스크롤 아닌가요 

드래그 가능한 곳을 제가 찾지를 못했는데...

스크롤시 마우스 휠 스크롤 혹은 스크롤바를 통해 아래로 내렸을 때 메뉴 바 색이 변하는 것 까지는 확인이

가능한데요???

예뜨락
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

정확히 드래그가 어떤 상황을 말하나요

PC인가요 모바일인가요

마우스 이벤트나 터치 이벤트가 정확해야 원하는 답이 나올텐데 ( 스크롤 이벤트인지 마우스 이동 이벤트인지

클릭이벤트인지 마우스 온 이벤트인지  기타 등등 )

드래그 해서 해당 섹션으로 이동한다는 것이 어떻게 동작하는 건지 제가 이해를 못했습니다 

답변에 대한 댓글 1개

다나한포션
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
답변감사합니다^^
www.isoohyun.co.kr
여기 사이트 우측 처럼 구현을 원하는거라서요 (마우스 아래 드래그를 해도 우측 색상이 변하는)
꼭 클릭을 통해서 이벤트가 이루어져야 하는것이라면
제가 원래 찾았던 방법 말고
다른 방법으로 구현을 해야 할것같네요 ㅠ
예뜨락
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전

답이 달렸군요 참고만하세요 ^^;

Copy 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <title>Document</title>
</head>
<body>


    <style>
    #sec_01{
    margin:500px auto;
    width:500px; height:500px;
    text-align:center;
    border:1px slid #ccc;
    background:yellow;
    }
    #sec_02{
    margin:500px auto;
    width:500px; height:500px;
    text-align:center;
    border:1px slid #ccc;
    background:pink;
    }

    .test_link{color:#00cc00;font-weight:normal}
    .active{color:#ff0033;font-weight:bold}
    </style>


    <script  src="http://code.jquery.com/jquery-latest.min.js"></script> 
    <script>
    function fnMove(seq){
        var offset = $("#sec_0" + seq).offset();
        var idx    = parseInt(seq) - 1;
        $("#sec_01").removeClass("active");          // 1번 div 클래스에서 클래스 삭제
        $("#sec_02").removeClass("active");          // 2번 div 클래스에서 클래스 삭제
        $(".test_link").removeClass("active");       // 링크 클래스에서 클래스 삭제


        $("#sec_0" + seq).addClass("active");        //1번, 2번 클릭한 div에 클래스 추가
        $(".test_link").eq(idx).addClass("active");  //클릭한 링크에 클래스 추가
        $('html, body').animate({scrollTop : offset.top}, 400);
    }
    </script>
     

    <div style="position:fixed;top:50px;left:50px;">
        <a href="#" class="test_link" onclick="fnMove('1')">테스트1</a>
        <a href="#" class="test_link" onclick="fnMove('2')">테스트2</a>
    </div>

    <div id="sec_01">
    1번
    </div>
    <div id="sec_02">
    2번
    </div>

</body>
</html>

답변에 대한 댓글 1개

다나한포션
프로필 보기이 회원 글보기이 회원의 댓글보기
 3년 전
감사합니다. 알려주신 방법대로 하니 아주 잘됩니다.
마찬가지로 한가지 더 여쭙자면..
클릭해서 active도 되지만
마우스 드래그 해서 해당 섹션으로 갔을때도 active가 될 수 있게 가능할런지요.
염치없습니다..ㅠ
감사합니다^^

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