부트스트랩을 사용하여 탐색 링크를 활성화하는 방법: 단계별 가이드

Bootstrap에서 탐색 링크 활성화

Bootstrap 웹사이트에서 볼 수 있는 활성 탐색 기능을 복제할 때 사용자는 메뉴 항목을 활성화하는 데 어려움을 겪을 수 있습니다. 이 문제를 해결하려면 필요한 CSS 및 JavaScript가 올바르게 구현되었는지 확인하세요.

HTML

HTML 구조에는 순서가 지정되지 않은 목록(

)를 목록 항목(
• )으로 포함하며 각각 앵커 태그()를 포함합니다. 앵커 태그는 탐색 링크를 정의하며 선택적으로 현재 활성 항목에 대한 aria-current="page" 속성을 포함할 수 있습니다.

  <code class="html"><ul class="menu">
      <li><a href="#">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

  탐색 링크를 활성화하고 활성 클래스를 전환하려면 jQuery를 구현하세요. 이벤트 핸들러:

  <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>

  위 내용은 부트스트랩을 사용하여 탐색 링크를 활성화하는 방법: 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!