클릭시 버튼 고정적으로 변화하고 싶습니다
본문
여분필드로 인원란을 만들어서
<div class="fz_lank">
<span style="padding:3px;"><th scope="col"><?php echo subject_sort_link('wr_3', $qstr2.'&sca='.urlencode($sca), 1) ?>
<span style="color:#4c4e4d">인원순 </th></span>
</div>
게시판 상단에 인원순 버튼 하나 만들었는데요
카테고리 처럼 눌렀을시 고정적으로 색이 변화된 상태로 만들고 싶습니다
이런식으로
<li><a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=ev1"
<?php if ($bo_table=='ev1') { ?> class="gnb_sl"<?php } ?>>홈페이지 </a></li>
조건을 줘서 넣을수는 없을까요?
<script>
$(document).ready(function() {
$(".fz_lank span").click(function() {
$(this).addClass("gnb_sl");
});
});
</script>
현재 상태는 이거인데
클릭시에만 잠깐 스타일이 들어갑니다
고정적으로 바꾸고 싶습니다 도움좀 부탁드립니다 ~
답변 3
소스 혼잡을 피하기 위해 추천 드렸던 방법입니다.
이런걸 말씀하시나요?
<?php
$css_gnb_sl = '';
if ($bo_table=='ev1') {
$css_gnb_sl = '$(this).addClass("gnb_sl")';
}
?>
<script>
$(document).ready(function() {
<?php echo $css_gnb_sl; ?>
$(".fz_lank span").click(function() {
$(this).addClass("gnb_sl");
});
});
</script>
css 를 사용하는 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta chartset="UTF-8" />
<style type="text/css">
nav ul { list-style-type: none; }
nav ul li { float: left; }
nav ul li a { padding: 0.5em 2.0em; background-color: #eee; }
nav ul li a:link { color: #000; text-decoration: none; }
nav ul li a:visited[href="?a=1"] { color: #f00; }
nav ul li a:visited[href="?a=2"] { color: #0f0; }
nav ul li a:visited[href="?a=3"] { color: #00f; }
nav ul li a:visited[href="?a=4"] { color: #ff0; }
nav ul li a:hover { background-color: #ddd; }
nav ul li a:active[href="?a=1"] { color: #f00; }
nav ul li a:active[href="?a=2"] { color: #0f0; }
nav ul li a:active[href="?a=3"] { color: #00f; }
nav ul li a:active[href="?a=4"] { color: #ff0; }
</style>
</head>
<body>
<nav>
<ul>
<li><a href="?a=1">1</a></li>
<li><a href="?a=2">2</a></li>
<li><a href="?a=3">3</a></li>
<li><a href="?a=4">4</a></li>
</ul>
</nav>
</body>
</html>
액티브 비지티드 반응 css 맞습니다.
다만 응용하기 나름인 것이죠