Bootstrap 활성 탐색 수정
Bootstrap의 웹사이트는 사용자 입력에 따라 쉽게 섹션을 일치시키고 배경색을 변경하는 하위 탐색을 자랑합니다. 이 글의 목적은 스크롤이나 클릭 시 클래스가 활성화되는 문제를 해결하는 데 중점을 두고 배경 변경 없이 단순화된 메뉴를 만드는 단계를 안내하는 것입니다.
CSS 사용자 정의:
제공된 HTML 코드 표준인 것으로 보이며 CSS 개정 내용은 다음과 같습니다.
.menu { list-style:none; } .menu > li { float: left; } .menu > li > a { color: #555; float: none; padding: 10px 16px 11px; display: block; } .menu > li > a:hover { color: #F95700; } .menu a[aria-current="page"], .menu a[aria-current="page"]:hover { color:#F95700; }
액티브 클래스 전환 기능을 구현하려면 JavaScript가 필요합니다. 제공된 답변은 jQuery를 활용하여 원하는 효과를 얻습니다.
$('.navbar li').click(function(e) { $('.navbar li.active').removeClass('active'); var $this = $(this); if (!$this.hasClass('active')) { $this.addClass('active'); } e.preventDefault(); });
이 코드는 메뉴 항목을 클릭하면 모든 활성 클래스가 제거되고 현재 항목이 활성 상태를 얻도록 보장합니다. 이는 Bootstrap의 하위 탐색에서 관찰되는 동작과 일치합니다.
이 기능을 구현하려면 jQuery, bootstrap.js 및 bootstrap.css 파일이 적절하게 연결되어 있는지 확인하세요.
위 내용은 다음은 질문 형식을 염두에 두고 기사의 핵심 내용에 초점을 맞춘 몇 가지 제목 옵션입니다. **옵션 1(직접적이고 명확함):** * **단순화된 활성 탐색 메뉴를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!