BootStrap 페이지 서명 전환 실효 해결 방법
boottstrap 에서 탭 을 개발 할 때 탭 은 정상적으로 표시 되 지만 클릭 할 때 해당 하 는 내용 영역 은 변 하지 않 습 니 다.
구체 적 인 증상 과 해결 방안
1.탭 UI 가 나타 나 지만 반응 이 없 으 면 탭 UI 가 클릭 에 따라 전환 되 지 않 습 니 다.
먼저 bootstrap.css,jQuery.js 와 bootstrap.js 가 올 바 르 게 도입 되 었 는 지 확인 하고 도입 순서 jQuery 가 앞 에 있 는 지,bootstrap.js 가 뒤에 있 는 지 확인 합 니 다.코드 에 다른 오류 가 있 는 지 확인 하고 JS 를 중 지 했 습 니 다.
2.탭 은 클릭 에 따라 전환 할 수 있 지만,클릭 후 앞의 몇 가지 내용 은 전환 할 수 있 지만,뒤의 몇 가지 내용 은 전환 에 실패 합 니 다.
발생 원인:
내용 영역의 html 구조 에 오류 가 발생 했 습 니 다.단일 tab 에 div 의 끝 탭 을 하나 더 써 서 tab-content 라 는 div 를 너무 일찍 닫 았 습 니 다.나머지 tab-pan 은 원래 의 tab-content 와 부자 관계 가 아 닌 동급 관계 가 되 었 습 니 다.자세히 살 펴 보면 클릭 한 후에 tab-content 구역 에 나타 나 야 할 내용 이 페이지 아래 에 나타 나 는 것 이 주요 한 특징 입 니 다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>bootstrap </title>
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<!-- jQuery， bootstrap.js-->
<script src="//cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content{
width: 60%;
margin: auto;
}
</style>
</head>
<body>
<div class="content">
<ul class="nav nav-tabs" id='consume_tab'>
<li><a href="#tab0" rel="external nofollow" data-toggle="tab"> 0</a></li>
<li ><a href="#tab1" rel="external nofollow" data-toggle="tab"> 1</a></li>
<li ><a href="#tab2" rel="external nofollow" data-toggle="tab"> 2</a></li>
<li ><a href="#tab3" rel="external nofollow" data-toggle="tab"> 3</a></li>
<li ><a href="#tab4" rel="external nofollow" data-toggle="tab"> 4</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active " id="tab0">
<div>
<span> 0 </span>
</div>
</div>
<div class="tab-pane fade " id="tab1">
<div>
<span> 1 </span>
</div>
</div>
<div class="tab-pane fade " id="tab2">
<div>
<span> 2 , </span>
<!-- 2 -->
</div>
</div>
</div>
<div class="tab-pane fade " id="tab3">
<div>
<span> 3 , 2 </span>
</div>
</div>
<div class="tab-pane fade " id="tab4">
<div>
<span> 4 ， 2 </span>
</div>
</div>
</div>
</div>
</body>
</html>
요 소 를 심사 할 때 tab-pan 과 tab-content 가 같은 등급 에서 나타 나 는 것 이 가장 뚜렷 한 특징 입 니 다.이 때 는 마지막 으로 클릭 할 수 있 는 페이지 서명 의 코드(예제 에서 tab 2)를 보고 나머지 div 종료 탭 을 제거 하면 됩 니 다.
총결산
이러한 오 류 는 boottstrap 을 처음 접 한 개발 자 들 이 쉽게 만 날 수 있 는 것 을 제외 하고 템 플 릿 엔진 을 사용 하여 boottstrap 와 결합 하여 개발 하 는 과정 에서 페이지 구조 가 복잡 할 때 도 이러한 오류 가 발생 하기 쉽 지만 오류 발생 원리 와 분석 방법 을 잘 알 고 해결 하 는 것 은 어렵 지 않다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
