제이쿼리나 자바스크립트로 CSS제어를 하고 싶은데요...
본문
원페이지 형식의 사이트라 ID값으로 스크롤되어 제어됩니다.
if URL창에 노출되는 페이지 id값이 #page1 또는 #page2 또는 #page3 일때
대메뉴중에 class명이 .menu2인 메뉴의 color를 green으로 바꿔라
이렇게 하려면 어떻게 해야 될까요?
답변 4
<script>
function navControl() {
var hash = location.hash;
var navActive = new Array();
$("색상바꿀 네비게이션의 a태그").each(function(i){
navActive[i] = $("부모클래스 혹은 태그",$(this)).attr("href");
});
targetN = parseInt(navActive.indexOf(hash)+1);
$("색상바꿀 네비게이션:nth-child("+targetN+")" a태그).addClass("pageActive");
혹은
$("색상바꿀 네비게이션:nth-child("+targetN+")" a태그).css("color","색상");
}
navControl();
$("네비게이션버튼").on("click",function(){
navControl();
})
</script>
에러가 있을런지..저도 테스트 돌려봐야 알겠지만..제대로 작동 한다면 targetN은 해당 해쉬태그를 가지고있는 a태그를 선택합니다. 해당 a태그의 href를 배열로 저장해서 그안에 hash태그가 현재 내 url의 hash태그와 비교해서 있는 놈의 index값을 불러오고. nth는 1부터, index는 0부터 시작하므로 숫자로 변환시켜서 +1을 해줍니다.
원페이지 태그로 조정하신다면 왠지 풀페이지js 사용하신거같은데.. 풀페이지js 문서에도 한번 확인해보세유
배경색을 바꿀때
$(".menu2").css("background-color","green");
글자색을 바꿀때
$(".menu2").css("color","green");
<script>
<? if($_GET["page"]=="X"){ ?>
$("#아이디").attr("style","color:#fff");
<? }?>
</script>
$(function() {
var h = window.location.hash;
if($.inArray(h, ['#page1', '#page2', '#page3']) > -1) {
$(".menu2").css("color", "gree");
}
});
