ul li에서 클릭시 색상 바뀌고 유지하는걸 하려면 어찌해야할까요

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!
ul li에서 클릭시 색상 바뀌고 유지하는걸 하려면 어찌해야할까요

QA

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? 그런걸 설치해서 하라는거 같은데..

그렇게 안하신분들도 꽤 있으신거 같고 해서..

 

혹시 이런건 어떤방법으로 하는건지 혹시 알수 있을까요..

 

2072820919_1686661018.4789.jpg

이 질문에 댓글 쓰기 :

답변 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>
답변을 작성하시기 전에 로그인 해주세요.
전체 128
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT