link클릭 시 border-bottom 색상 유지 질문
본문
현재 메뉴 구성입니다.
질문 드리고 싶은 것은 shop 클릭 후 해당 페이지에서 border-bottom의 색상을 red로 바꾸고 폰트도 italic으로 바꾸고싶습니다.
css에서 active 사용 시에는 클릭하는 순간에만 변하고 그 후는 다시 border-bottom색상이 black으로 돌아오더라구요...
제발 도와주세요!!
자바스크립트를 사용해여할까요??
답변 1
스크립트 사용해서 클래스를 추가해주셔야합니다
css만으로는 상태제어하기 어렵습니다
정 css로만 해야한다면 checkbox로 변경해서 checked 상태로 구분하는방법도있습니다만,,
자바스크립트에 제가 아직 익숙하지 않아서 그런데,, 혹시 조금만 더 자세히 알려주실 수 있을까요??
<a class="link"></a>
$(".link").on("click", function() {
$(".link").removeClass("active");
$(this).addClass("active");
}
가 제일 무난하겠네요
css도 함께 추가해야하는거죠??
.link {
border-bottom: 1px solid black;
}
.link:active {
border-bottom: 1px solid red;
}
이렇게 했는데 그대로여서요,, 추가 질문 드립니다
정말 감사합니다
클래스에 css추가하는건 .active로 주시면 됩니다
안녕하세요, 아직도 해결이 안되어서 재질문 드립니다.
말씀하신 자바스크립트 삽입하고 css도 넣었는데 작동이 되지 않습니다..... 왜이러는걸까요ㅠㅠㅠ
html)
<ul id="hd_qnb">
<li><a href="<?php echo G5_SHOP_URL ?>/list_itemall.php" class="hd_qnb_link">shop</a></li>
<li><a href="<?php echo get_pretty_url('content', 'company'); ?>" class="hd_qnb_link">about us</a></li>
<li><a href="<?php echo G5_SHOP_URL ?>/formmail.php" class="hd_qnb_link">contact</a></li>
</ul>
script)
$(".hd_qnb_link").on("click",function(){
$(".hd_qnb_link").removeClass("active");
$(this).addClass("active");
}
);
css)
.hd_qnb_link {border-bottom: 1px solid black;}
.active {border-bottom: 1px solid red; }
뭐가 오류인지 알려주시면 정말 감사하겠습니다...
