링크를 클릭하면 부모 목록에 활성 클래스 추가

Abanoub

링크를 클릭 할 때 부모 목록에 활성 클래스를 추가 / 활성, JavaScript다음과 같이 사용하여 주입하려고합니다 .

$(document).ready(
    function()
    {
        //injecting active status to the navigation bar lists
        var element = document.getElementById("navbar-ul");
        var links   = element.getElementsByTagName("a");

        for(var i = 0; i < links.length ; i++) {
            links[i].onclick(function () {
                links[i].parent().addClass('active');
            });
        }
    }
);

하지만 다음과 같은 오류가 발생합니다.

TypeError: links[i].onclick is not a function

어떻게해야하나요?

jmore009

이것은 jQuery를 사용하면 매우 간단합니다.

$("#navbar-ul a").click(function(){
   $(this).parent().addClass("active");       
});

예 1

클릭되는 링크에 활성 상태를 추가하고 다른 링크를 제거하려는 것 같습니다. 그렇다면 .siblings()다른 링크를 찾고 해당 클래스를 제거하는 데 사용할 수 있습니다 .

$("#navbar-ul a").click(function(){
   $(this).closest("li").addClass("active").siblings("li").removeClass("active");   

});

예 2

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

하위 메뉴가 활성화되면 부모 li에 클래스 추가

분류에서Dev

Ember에서 항목을 클릭 할 때 항목 목록에 활성 클래스를 추가하려면 어떻게해야합니까?

분류에서Dev

Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

분류에서Dev

Wordpress의 링크에 활성 CSS 클래스를 추가하는 방법

분류에서Dev

Vue-반복 목록의 하위 구성 요소에서 부모 LI에 클래스를 추가합니까?

분류에서Dev

목록에 아이콘 추가를 클릭하면 부트 스트랩 Jquery <li>

분류에서Dev

활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

분류에서Dev

목록에 활성 클래스를 추가 할 수 없습니다.

분류에서Dev

ReactJS에서 클릭 한 항목에 활성 클래스를 추가하는 방법

분류에서Dev

링크를 클릭하면 요소로 스크롤 한 다음 요소에 클래스를 추가합니다.

분류에서Dev

자식에 활성 클래스가있는 경우에만 부모에 클래스 추가

분류에서Dev

클래스를 클릭하면 jQuery가 무작위 목록 항목에 추가됩니다.

분류에서Dev

PHP를 통해 탐색 링크에서 활성 클래스를 추가 및 제거 하시겠습니까?

분류에서Dev

새 탭에 활성 클래스를 추가하려면 어떻게합니까

분류에서Dev

Magento에서 탐색 링크에 활성 클래스를 추가하는 방법은 무엇입니까?

분류에서Dev

센터 리에 활성 클래스를 추가하는 방법

분류에서Dev

fancybox를 닫고 jquery의 부모 항목에 클래스 추가

분류에서Dev

fancybox를 닫고 jquery의 부모 항목에 클래스 추가

분류에서Dev

Angular JS에서 클릭 한 부모 링크에 클래스를 추가 / 제거하는 방법은 무엇입니까?

분류에서Dev

반응 맵 기능에서 그룹 목록 항목에 활성 클래스를 추가 할 수 없습니다.

분류에서Dev

링크를 클릭하면 다음 페이지에서 클래스 아코디언 요소 추가 / 변경

분류에서Dev

링크를 클릭하면 다음 페이지에서 클래스 아코디언 요소 추가 / 변경

분류에서Dev

활성 클래스가없는 경우에만 링크를 표시하려면 어떻게해야합니까?

분류에서Dev

내부 앵커가있는 활성 메뉴 항목에 클래스 추가

분류에서Dev

div 내의 모든 범위에 활성 클래스 추가

분류에서Dev

사용자 클릭시 특정 "li"에 활성 클래스를 추가하는 방법

분류에서Dev

클릭 버튼에 활성 클래스를 추가하는 방법은 무엇입니까?

분류에서Dev

로드시 사용자 정의 링크에 활성 클래스 추가

분류에서Dev

뒤로 링크를 클릭하면 이전 페이지에서 활성화 된 div로 돌아가는 방법

Related 관련 기사

  1. 1

    하위 메뉴가 활성화되면 부모 li에 클래스 추가

  2. 2

    Ember에서 항목을 클릭 할 때 항목 목록에 활성 클래스를 추가하려면 어떻게해야합니까?

  3. 3

    Jquery는 모든 div에 활성 클래스를 추가하지만 활성 클래스 만 원합니다.

  4. 4

    Wordpress의 링크에 활성 CSS 클래스를 추가하는 방법

  5. 5

    Vue-반복 목록의 하위 구성 요소에서 부모 LI에 클래스를 추가합니까?

  6. 6

    목록에 아이콘 추가를 클릭하면 부트 스트랩 Jquery <li>

  7. 7

    활성 클래스를 추가하고 마지막 클래스에서 제거하는 Vue 바인드 클릭

  8. 8

    목록에 활성 클래스를 추가 할 수 없습니다.

  9. 9

    ReactJS에서 클릭 한 항목에 활성 클래스를 추가하는 방법

  10. 10

    링크를 클릭하면 요소로 스크롤 한 다음 요소에 클래스를 추가합니다.

  11. 11

    자식에 활성 클래스가있는 경우에만 부모에 클래스 추가

  12. 12

    클래스를 클릭하면 jQuery가 무작위 목록 항목에 추가됩니다.

  13. 13

    PHP를 통해 탐색 링크에서 활성 클래스를 추가 및 제거 하시겠습니까?

  14. 14

    새 탭에 활성 클래스를 추가하려면 어떻게합니까

  15. 15

    Magento에서 탐색 링크에 활성 클래스를 추가하는 방법은 무엇입니까?

  16. 16

    센터 리에 활성 클래스를 추가하는 방법

  17. 17

    fancybox를 닫고 jquery의 부모 항목에 클래스 추가

  18. 18

    fancybox를 닫고 jquery의 부모 항목에 클래스 추가

  19. 19

    Angular JS에서 클릭 한 부모 링크에 클래스를 추가 / 제거하는 방법은 무엇입니까?

  20. 20

    반응 맵 기능에서 그룹 목록 항목에 활성 클래스를 추가 할 수 없습니다.

  21. 21

    링크를 클릭하면 다음 페이지에서 클래스 아코디언 요소 추가 / 변경

  22. 22

    링크를 클릭하면 다음 페이지에서 클래스 아코디언 요소 추가 / 변경

  23. 23

    활성 클래스가없는 경우에만 링크를 표시하려면 어떻게해야합니까?

  24. 24

    내부 앵커가있는 활성 메뉴 항목에 클래스 추가

  25. 25

    div 내의 모든 범위에 활성 클래스 추가

  26. 26

    사용자 클릭시 특정 "li"에 활성 클래스를 추가하는 방법

  27. 27

    클릭 버튼에 활성 클래스를 추가하는 방법은 무엇입니까?

  28. 28

    로드시 사용자 정의 링크에 활성 클래스 추가

  29. 29

    뒤로 링크를 클릭하면 이전 페이지에서 활성화 된 div로 돌아가는 방법

뜨겁다태그

보관