gg맨
1k
2020-10-19 16:33:36 작성 2020-10-19 16:35:10 수정됨
2
62

보이기 숨기기 기능 질문 드립니다.


처음에는 전체보기가 되고 자음을 눌렀을떄 아래 내용에 그에 맞는것들만 노출되게 하고 싶습니다.

ex) ㄱ을 누르면  감자,고구마,기린,강아지 이렇게만 보이게 하고 싶습니다.

코드를 어떻게 짜면 좋을까요??

답변 부탁 드립니다!


<ul id="filter" class="tab-1">
    <li><a href="#none">ALL</a></li>
    <li><a href="#none">ㄱ</a></li>
    <li><a href="#none">ㄴ</a></li>
    <li><a href="#none">ㄷ</a></li>
    <li><a href="#none">ㄹ</a></li>
    <li><a href="#none">ㅁ</a></li>
    <li><a href="#none">ㅅ</a></li>
    <li><a href="#none">ㅇ</a></li>
    <li><a href="#none">ㅈ</a></li>
    <li><a href="#none">ㅊ</a></li>
    <li><a href="#none">ㅋ</a></li>
    <li><a href="#none">ㅌ</a></li>
    <li><a href="#none">ㅍ</a></li>
    <li><a href="#none">ㅎ</a></li>
</ul>

<div id="tab-1" class="tab-cont">
    <ul class="list">
        <li><a href=""><img src="img.png" alt=""  >감자</a></li>
        <li><a href=""><img src="img.png" alt=""  >사과</a></li>
        <li><a href=""><img src="img.png" alt=""  >고구마</a></li>
        <li><a href=""><img src="img.png" alt=""  >포도</a></li>
        <li><a href=""><img src="img.png" alt=""  >양파</a></li>
        <li><a href=""><img src="img.png" alt=""  >바나나</a></li>
        <li><a href=""><img src="img.png" alt=""  >키위</a></li>
        <li><a href=""><img src="img.png" alt=""  >수박</a></li>
        <li><a href=""><img src="img.png" alt=""  >메론</a></li>                          							
    </ul>
</div>

<div id="tab-2" class="tab-cont">
    <ul class="list">
        <li><a href=""><img src="img.png" alt="">기린</a></li>							
        <li><a href=""><img src="img.png" alt="">호랑이</a></li>							
        <li><a href=""><img src="img.png" alt="">사자</a></li>							
        <li><a href=""><img src="img.png" alt="">코끼리</a></li>							
        <li><a href=""><img src="img.png" alt="">염소</a></li>							
        <li><a href=""><img src="img.png" alt="">늑대</a></li>							
        <li><a href=""><img src="img.png" alt="">여우</a></li>							
        <li><a href=""><img src="img.png" alt="">강아지</a></li>							

    </ul>
</div>


 
0
  • 답변 2

  • 까꿍
    221
    2020-10-19 16:56:53

    jQuery 는 사용하실 줄 아시나요?

  • gg맨
    1k
    2020-10-20 00:07:16
  • 로그인을 하시면 답변 을 등록할 수 있습니다.