Bootstrap CSS로 활성 탐색 달성
활성 클래스 기능을 유지하면서 Bootstrap에서 사용자 정의 탐색 메뉴를 만드는 것은 어려울 수 있습니다. 이 문서에서는 메뉴 항목을 스크롤하거나 클릭할 때 활성 클래스가 전환되지 않는 이유에 대한 문제를 다룹니다.
HTML 구조
제공되는 HTML은 기본적으로 항목 목록으로 구성됩니다. 해당 앵커 사용:
<code class="html"><ul class="menu"> <li><a href="#" aria-current="page">Home</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul></code>
사용자 정의 CSS
메뉴의 CSS 스타일은 목록 스타일, 부동 및 패딩과 같은 기본 속성을 정의합니다. 또한 마우스 오버 상태 및 활성 상태가 지정됩니다.
<code class="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; }</code>
활성 상태용 JavaScript
활성 클래스를 올바르게 전환하려면 JavaScript가 필요합니다. 다음 스니펫은 메뉴 항목 클릭을 처리하고 한 번에 하나의 항목만 활성화되도록 합니다.
<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>
추가 고려 사항
이 특정한 경우 Bootstrap JavaScript에서 .navbar로 표시되는 탐색이 대상이 됩니다. 그러나 이 솔루션을 채택할 때는 구현의 세부 사항을 고려하는 것이 항상 중요합니다.
제공된 HTML, CSS 및 JavaScript를 활용하면 원하는 활성 클래스 기능을 갖춘 사용자 정의 탐색 메뉴를 얻을 수 있습니다.
위 내용은 사용자 정의 CSS 및 JavaScript를 사용하여 부트스트랩 메뉴에서 활성 탐색을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!