active 관련 질문드립니다.
본문
안녕하세요.
링크를 눌러서 해당 섹션으로 도착할때
a 링크에 class="active"를 주고 싶습니다.
<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" 가 붙게 하고 싶습니다. (색상변경때문..)
구글링해도 잘 나오지가 않아서요ㅠ
고수님들의 도움 부탁드립니다.....
답변 4
<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>
감사합니다. 정말 잘됩니다. ㅠ
혹시 염치없지만 한가지 더 여쭙니다..
클릭해서 해당 섹션으로 갔을때 active가 아주 잘 되는데
클릭하지 않고
마우스 드래그 해서 해당 섹션으로 갔을때도 active 기능이 될런지요
그건 css 에서 :hover 를 설정해주면 됩니다.
https://dasima.xyz/css-hover-%ED%9A%A8%EA%B3%BC-%EC%A0%95%EB%A6%AC/
도움 되셨으면 답변 채택 바랍니다.
답이 달렸군요 참고만하세요 ^^;
<!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>
감사합니다. 알려주신 방법대로 하니 아주 잘됩니다.
마찬가지로 한가지 더 여쭙자면..
클릭해서 active도 되지만
마우스 드래그 해서 해당 섹션으로 갔을때도 active가 될 수 있게 가능할런지요.
염치없습니다..ㅠ
감사합니다^^
정확히 드래그가 어떤 상황을 말하나요
PC인가요 모바일인가요
마우스 이벤트나 터치 이벤트가 정확해야 원하는 답이 나올텐데 ( 스크롤 이벤트인지 마우스 이동 이벤트인지
클릭이벤트인지 마우스 온 이벤트인지 기타 등등 )
드래그 해서 해당 섹션으로 이동한다는 것이 어떻게 동작하는 건지 제가 이해를 못했습니다
답변감사합니다^^
www.isoohyun.co.kr
여기 사이트 우측 처럼 구현을 원하는거라서요 (마우스 아래 드래그를 해도 우측 색상이 변하는)
꼭 클릭을 통해서 이벤트가 이루어져야 하는것이라면
제가 원래 찾았던 방법 말고
다른 방법으로 구현을 해야 할것같네요 ㅠ
혹시 스크롤 아닌가요
드래그 가능한 곳을 제가 찾지를 못했는데...
스크롤시 마우스 휠 스크롤 혹은 스크롤바를 통해 아래로 내렸을 때 메뉴 바 색이 변하는 것 까지는 확인이
가능한데요???
