다음은 기사에 맞는 몇 가지 질문 기반 제목입니다. **짧음

Bootstrap의 활성 탐색 클래스로 문제 극복

Bootstrap에서 탐색 메뉴를 사용자 정의할 때 메뉴 항목을 스크롤하거나 클릭할 때 활성 클래스가 전환되지 않는 문제가 발생할 수 있습니다. . 이는 적절한 JavaScript 지원이 없는 CSS 수정으로 인해 발생할 수 있습니다.

CSS 개선

제공된 HTML 및 CSS는 Bootstrap의 기본 메뉴 구조 및 스타일과 유사합니다. 하위 탐색 동작을 복제하려면 추가 수정이 필요합니다.

jQuery 구현

DOM을 조작하고 탐색 링크의 활성 상태를 제어하려면 jQuery 통합이 필요합니다. 다음 코드는 이 목적을 수행합니다.

<code class="javascript">$('.navbar li').click(function(e) {
    $('.navbar li.active').removeClass('active');
    var $this = $(this);
    if (!$this.hasClass('active')) {
        $this.addClass('active');
    }
    e.preventDefault();
});</code>

함수 분석

• 이 코드는 "navbar" 클래스가 있는 요소 내의 모든 목록 항목(li)을 선택합니다.
• 목록 항목을 클릭하면 이전에 활성화된 항목에서 활성 클래스가 제거됩니다.
• 현재 목록 항목의 상태를 평가하여 아직 활성화되지 않은 경우 활성 클래스를 받습니다.
• e.preventDefault() 사용; 클릭한 링크의 대상으로 페이지가 스크롤되는 것을 방지합니다.

위 내용은 다음은 기사에 맞는 몇 가지 질문 기반 제목입니다. **짧음의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!