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>
답이 달렸군요 참고만하세요 ^^;
<!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>
정확히 드래그가 어떤 상황을 말하나요
PC인가요 모바일인가요
마우스 이벤트나 터치 이벤트가 정확해야 원하는 답이 나올텐데 ( 스크롤 이벤트인지 마우스 이동 이벤트인지
클릭이벤트인지 마우스 온 이벤트인지 기타 등등 )
드래그 해서 해당 섹션으로 이동한다는 것이 어떻게 동작하는 건지 제가 이해를 못했습니다
혹시 스크롤 아닌가요
드래그 가능한 곳을 제가 찾지를 못했는데...
스크롤시 마우스 휠 스크롤 혹은 스크롤바를 통해 아래로 내렸을 때 메뉴 바 색이 변하는 것 까지는 확인이
가능한데요???
답변을 작성하시기 전에 로그인 해주세요.