css,javascript 질문
본문
아래 div에 a태그 넣어서 iframe 으로 내용은 바꾸고
저 같은 경우는 저 3개의 div 박스에
자바스크립트를 onclick 함수를 사용해서
box1 클릭시 배경색 빨강
box2,3 은 하얀
box2 클릭시.......생략
이렇게 코드를 짜는데요
이런 식으로 하면 9줄 이상 짜야되니까 좀 더 편한 방법이 없을까...하고 찾아보고 있는데
input checkbox로 하려니 a태그가 막히고(block인 상태)
다른 고수분들은 어떤 식으로 코드를 짜나요?
*************************************온클릭 함수를 이용하진 않았지만 대략 이런식으로 짭니다..
$(function(){
$("#box1").click(function(){
$("#box1").css("background-color","red");
$("#box2").css("background-color","black");
$("#box3").css("background-color","black");
});
});
$(function(){
$("#box2").click(function(){
$("#box1").css("background-color","black");
$("#box2").css("background-color","red");
$("#box3").css("background-color","black");
});
});
$(function(){
$("#box3").click(function(){
$("#box1").css("background-color","black");
$("#box2").css("background-color","black");
$("#box3").css("background-color","red");
});
});
***********************************
답변 1
# 이 ID, . 이 클래스 인건 아시죠
보통은 클래스로 씁니다.
div 3개의 class를 동일한 이름으로 주고
클릭 이벤트 발생시에 전체 클래스의 배경색을 하얀 처리 후
this를 이용해 해당 div 만 빨강 처리합니다.