ul li에서 클릭시 색상 바뀌고 유지하는걸 하려면 어찌해야할까요
본문
제가 개념도 아직 없고 완전 초보라서..이해하는데 도움이 좀 필요한거 같아 글을 적어요
pc는 상관없는데 모바일에서
중요 메뉴가 좀 계속 노출되야하는 부분이 있어서
아!!! 그러면 하단에 네비게이션바나 버튼을 하나 만들어주면 되겠지 하고 생각했어요
그래서 일딴
<ul>
<li>
<a href="">1번 게시판이동</a>
</li>
<li>
<a href="">2번 게시판이동</a>
</li>
</ul>
이런 형식으로 단순하게 만들어 모바일 하단에 넣었는데요
당연히 클릭하면 작동은 잘하죠..
그런데 하나나 두개면 몰라도 4개 5개라...이제 뭘 클릭했는지 내가 무슨 메뉴를 클릭했는지
색상이 바뀐다던지..하는 표식이 좀 들어가야겠다 생각이 들었는데요
이걸 잘 모르겠어요..
그래서 찾아다녀도 딱히 없고...생각하다가 아..class에 색상을 담아서..
active시 색상을 빼던지 넣던지 암튼 그런식으로 해보자..해서..
li에 class를 가령 my라고 넣어주고..my에 대한 색상을 설정했을때
기초적 접근으로
.my {
background-color: #000;
}
.active {
background-color: #fff
}
스크립트에선
my클래스를 제거하거나 추가하는 active를 활성화했는데요.
$('.my').click(function () {
$('.active').removeClass('active');
$(this).addClass('active');
})
문제는 클릭할때만 잠깐 1초 active가 활성화가 되고..
페이지가 호출되면...다시 원상태가 되고 있어요
( 저는 메뉴가 다 검은색인데..클릭되서 보여지고 있는 메뉴만 흰색! ..이런식을 원했거든요 )
찾다보니 이게 무슨 라이브러리를 따로 깔고 설치해야하는거 같은 느낌도 들더라구요..
다들 react? 그런걸 설치해서 하라는거 같은데..
그렇게 안하신분들도 꽤 있으신거 같고 해서..
혹시 이런건 어떤방법으로 하는건지 혹시 알수 있을까요..
답변 1
여러가지 구현 방법중 다음은 data 속성을 사용해 표현하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
ul.subnav {
list-style-type: none;
margin: 0;
padding: 0;
background-color: blue;
width: 20%;
}
ul.subnav a {
text-decoration: none;
background-color: #000;
color: #fff;
display: block;
padding: 1em;
}
ul.subnav a:hover, ul.subnav a.active {
filter: invert(1);
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function () {
const params = new URLSearchParams(window.location.search);
if (params.has('tbl') == true) {
const tbl = params.get('tbl');
$('ul.subnav a').each(function (i, el) {
if (tbl == $(el).data('tbl')) {
$(el).addClass('active');
return false;
}
});
}
});
</script>
</head>
<body>
<ul class="subnav">
<li><a href="?tbl=free" data-tbl="free">1번 게시판이동</a></li>
<li><a href="?tbl=notice" data-tbl="notice">2번 게시판이동</a></li>
<li><a href="?tbl=a" data-tbl="a">3번 게시판이동</a></li>
<li><a href="?tbl=b" data-tbl="b">4번 게시판이동</a></li>
<li><a href="?tbl=c" data-tbl="c">5번 게시판이동</a></li>
</ul>
</body>
</html>
무조건! 추천박고 정독합니다!!! 감사드립니다 (--)(__)