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

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

Barbara Streisand
Barbara Streisand원래의
2024-11-01 05:42:02775검색

How to Achieve Active Navigation in Bootstrap Menus with Custom CSS and 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.