javascript index 찾기

javascript index찾기

가장 많이 쓰는 on.off 또는 active를 사용할때 많이 쓰인다.

html 코드상에서는

    <ul class="menu-list">

      <li><a href="#">메뉴1</a></li>

      <li><a href="#">메뉴2</a></li>

      <li><a href="#">메뉴3</a></li>

      <li><a href="#">메뉴4</a></li>

      <li><a href="#">메뉴5</a></li>

      <li><a href="#">메뉴6</a></li>

      <li><a href="#">메뉴7</a></li>

      <li><a href="#">메뉴8</a></li>

      <li><a href="#">메뉴9</a></li>

    </ul>

이 부분이다.

제일 많이 쓰이는 구조이다.

이 부분에서 내가 선택한 것만 다른 용도로 보이고 싶을때는

스크립트

    <script>

      $(".menu-list li a").on("click", function () {

        // 변수 선언

        var _index = $(this).parent().index();

        //인덱스 적용

        $(".menu-list li").removeClass("on"); //on 클래스 먼저 removeClass로 지운다.

        $(".menu-list li").eq(_index).addClass("on"); //해당 부분 변수 _inDex로  클래스 추가

      });

    </script>

이렇게 스크립트를 쓴다.