지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 부트스트랩 튜토리얼 > 본문

부트스트랩 탭이 응답하지 않으면 어떻게 해야 합니까?

藏色散人
풀어 주다： 2020-11-30 16:37:06
원래의
2816명이 탐색했습니다.

부트스트랩 탭 무응답에 대한 해결 방법: 먼저 부트스트랩 탭 전환의 핵심 코드를 찾은 다음 버튼 그룹과 콘텐츠 그룹을 수정하세요.

부트스트랩 탭이 응답하지 않으면 어떻게 해야 합니까?

이 튜토리얼의 운영 환경: windows10 시스템, bootstrap3.0 이 기사는 모든 브랜드의 컴퓨터에 적용됩니다.

추천: "부트스트랩 비디오 튜토리얼"

부트스트랩을 사용할 때의 함정(탭 전환은 효과가 없습니다)

몇일 전에 부트스트랩의 탐색 탭을 사용할 때 문제가 발생했습니다:

우선, 첫 번째 탭 버튼과 첫 번째 탭 콘텐츠 섹션이 기본적으로 활성화됩니다. 두 번째 탭 버튼을 클릭하면 두 번째 탭의 내용이 정상적으로 표시됩니다. 그러나 다시 첫 번째 탭 버튼으로 전환하면 아무런 효과가 없습니다. 문서를 확인한 후 두

  • 모두 클래스 = "active"임을 확인했습니다.

    마침내 내 문서 구조가 공식 예제를 정확히 따르지 않는다는 것을 알게 되었습니다. 버튼 컨테이너가

      대신
      를 사용했습니다.

      마지막으로 정리하고 부트스트랩의 탭 전환 핵심 코드를 다음과 같이 사용해 보겠습니다. 

      <!-- 按钮组 -->
 <ul>
   <li class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
   <li><a href="#profile" data-toggle="tab">Profile</a></li>
   <li><a href="#messages" data-toggle="tab">Messages</a></li>
   <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>
 
<!-- 内容组 -->
 <div class="tab-content">
   <div class="tab-pane active" id="home">...</div>
   <div class="tab-pane" id="profile">...</div>
   <div class="tab-pane" id="messages">...</div>
   <div class="tab-pane" id="settings">...</div>
 </div>
      로그인 후 복사

      위 내용은 부트스트랩 탭이 응답하지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

    • 관련 라벨：
    bootstrap
    원천：php.cn
    이전 기사：HTML에서 부트스트랩을 참조하는 방법 다음 기사：부트스트랩 적응을 취소하는 방법
    본 웹사이트의 성명
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    저자별 최신 기사
    최신 이슈
    페이지가 갑자기 CSS나 부트스트랩을 가져올 수 없습니다. 그래서 저는 페이지를 개발 중입니다. 어제 일부 작업을 했는데 잘 작동했고, 오늘은 나머지 작업을 계속했는데 모든 것이 괜찮습니다. 일반 HTML 페이지로 열려고...
    에서 2024-04-06 21:58:04
    0
    1
    800
    CSS에서 페이지 하단의 신비한 공백을 해결하는 방법 Bootstrap과 D3를 사용하여 간단한 웹페이지를 구축하려고 하는데 하단의 공백을 모두 없애는 방법을 모르겠습니다. 나는 그것을 제거하고 싶다. 본문과 HTM...
    에서 2024-04-06 20:22:15
    0
    1
    454
    CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
    에서 2024-04-06 12:53:11
    0
    1
    376
    웹 페이지 크기를 조정할 때 부트스트랩 스위치가 제대로 작동하지 않습니다. 这是代码：<navxmlns:sec="http://www.thymeleaf.org/extras/spring-security"class=&qu...
    에서 2024-04-05 08:45:39
    0
    1
    3443
    Laravel의 Bootstrap 모드로 AWS PDF 파일 표시 https://xxx-xx-dev.s3.ap-south-1.amazonaws.com/std_check/6557122022151745398XtquBSY.pdf와 같...
    에서 2024-04-04 22:16:18
    0
    1
    1450
    관련 주제
    더>
    인기 추천
    인기 튜토리얼
    더>
    관련 튜토리얼
    인기 추천
    최신 강좌
    최신 다운로드
    더>
    웹 효과
    웹사이트 소스 코드
    웹사이트 자료
    프론트엔드 템플릿