사용자 정의 CSS 및 JavaScript를 사용하여 부트스트랩 메뉴에서 활성 탐색을 달성하는 방법은 무엇입니까?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!