>웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩 탭이 응답하지 않으면 어떻게 해야 합니까?

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

藏色散人
藏色散人원래의
2020-11-18 10:41:322851검색

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

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

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

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

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

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

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

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

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

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

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