기본 배경색 없이 Bootstrap CSS에서 활성 탐색 상태를 유지하는 방법은 무엇입니까?

Bootstrap CSS: 활성 탐색 유지

Bootstrap은 사용자가 웹사이트의 여러 섹션을 쉽게 탐색할 수 있는 탐색 시스템을 제공합니다. 그러나 기본 배경색 없이 메뉴를 사용자 정의하고 싶은 경우도 있습니다. 이러한 경우 메뉴 항목을 스크롤하거나 클릭할 때 활성 탐색 상태를 유지하기 위해 추가 논리를 구현해야 할 수도 있습니다.

다음 시나리오를 고려하십시오. HTML 및 CSS를 사용하여 다음과 유사한 사용자 정의 메뉴가 생성되었습니다. Bootstrap 웹사이트의 하위 탐색 메뉴. 그러나 아래로 스크롤하거나 메뉴 항목을 클릭하면 활성 클래스가 전환되지 않습니다.

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:

<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가 필요합니다. 다음 jQuery 코드는 현재 항목에 추가하기 전에 모든 메뉴 항목에서 활성 클래스를 지웁니다.

JavaScript:

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

이 코드를 통합하면 활성 클래스가 이제 메뉴를 탐색할 때 클래스가 올바르게 전환됩니다. 이 솔루션을 사용하면 원하는 시각적 동작을 유지하는 맞춤형 내비게이션 시스템이 가능합니다.

위 내용은 기본 배경색 없이 Bootstrap CSS에서 활성 탐색 상태를 유지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!