테이블 하이퍼링크 관련문의드려요.
본문
<style>
.shop_submenu table {width:100%; max-width:600px;margin-top: 15px; border-bottom: 2px solid #575757;}
.shop_submenu table td {width:33%;
text-align: center;
font-size: 1.4em;
background: #e3e3e3;
font-weight: 500;
color: #4d4d4d;
}
.shop_submenu table td:hover {background:red; color:white;}
</style>
<div class="shop_submenu">
<table>
<tr>
<td onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>
<td onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>
<td onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>
</tr>
</table>
쇼핑몰 제품리스트 바로 위에 별도의 서브메뉴를 넣어 구분하고 싶습니다.
버튼 3개를 넣었는데.. 페이지 이동이라서 클릭 후 hover 색상이 유지가 안되네요.
페이지가 전환되더라도 누른버튼의 배경색을 유지시키는 방법 알 수 있을까요?
답변 3
<style>
.shop_submenu table td .active {background:red; color:white;}
</style>
<div class="shop_submenu">
<table>
<tr>
<td class="<?php if($_GET['ca_id'] == 10) echo 'active'; ?>" onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>
<td class="<?php if($_GET['ca_id'] == 20) echo 'active'; ?>" onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>
<td class="<?php if($_GET['ca_id'] == 30) echo 'active'; ?>" onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>
</tr>
</table>
이렇게도 할수 있습니다.
너무 간단하게 적용할 수 있네요.
감사드려요.
아래의 코드를 참고해 보시겠어요?
PHP
<?php
// 현재 페이지의 ca_id를 얻어옴
$current_ca_id = isset($_GET['ca_id']) ? $_GET['ca_id'] : '';
// 버튼에 active 클래스를 추가하기 위한 배열
$button_classes = array(
'10' => '',
'20' => '',
'30' => ''
);
if (array_key_exists($current_ca_id, $button_classes)) {
$button_classes[$current_ca_id] = 'active';
}
?>
HTML CSS
<style>
.shop_submenu table {
width: 100%;
max-width: 600px;
margin-top: 15px;
border-bottom: 2px solid #575757;
}
.shop_submenu table td {
width: 33%;
text-align: center;
font-size: 1.4em;
background: #e3e3e3;
font-weight: 500;
color: #4d4d4d;
cursor: pointer;
transition: background 0.3s, color 0.3s;
}
.shop_submenu table td:hover {
background: red;
color: white;
}
.shop_submenu table td.active {
background: red;
color: white;
}
</style>
<div class="shop_submenu">
<table>
<tr>
<td class="<?php echo $button_classes['10']; ?>" onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>
<td class="<?php echo $button_classes['20']; ?>" onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>
<td class="<?php echo $button_classes['30']; ?>" onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>
</tr>
</table>
</div>
훌륭한 답변 감사드립니다.
다음 코드가 도움이 될지 모르겠습니다.
<style>
.shop_submenu table {width:100%; max-width:600px;margin-top: 15px; border-bottom: 2px solid #575757;}
.shop_submenu table td {width:33%;
text-align: center;
font-size: 1.4em;
background: #e3e3e3;
font-weight: 500;
color: #4d4d4d;
}
.shop_submenu table td:where(:hover,.active) {background:red; color:white;}
</style>
<div class="shop_submenu">
<table>
<tr>
<td onClick="location.href='/shop/list.php?ca_id=10'">주문1</td>
<td onClick="location.href='/shop/list.php?ca_id=20'">주문2</td>
<td onClick="location.href='/shop/list.php?ca_id=30'">주문3</td>
</tr>
</table>
<script>
var qs = new URLSearchParams(location.search);
var ca_id = qs.get('ca_id');
if (ca_id != null) {
document.querySelectorAll('.shop_submenu table td').forEach((el, i) => {
var param_each = el.getAttribute('onclick').match(/(?<=ca_id=)[^&$']+/);
if (param_each != null && param_each[0] == ca_id) {
el.classList.add('active');
}
});
}
</script>
답변 감사합니다.
그런데 유감스럽게도 제 페이지에서는 적용이 안되네요 ㅜㅜ