boottstrap 탭 옵션 전환 실현
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" >
<title> </title>
</head>
<body>
<!-- -->
<div class="qb-content-wrapper">
<div class="qb-content">
<!-- -->
<div class="currentLocation clearfix">
<span class="pull-left"> > </span>
<div class="nav-btn pull-right">
<input type="button" class="btn btn-info" value=" ">
<input type="button" class="btn btn-info returnBtn" value=" ">
</div>
</div>
<!-- -->
<div class="container-fluid">
<div class="row qb-content-wrapper qb-main-content">
<div class="col-md-12 col-xs-12">
<ul class="nav nav-tabs tabs" role="tablist">
<li role="presentation" class="tab-list active">
<a href="#home" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab">
<i class="fa fa-remove tab-close"></i></a>
</li>
<li role="presentation" class="tab-list"><a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile" role="tab" data-toggle="tab">
<i class="fa fa-remove tab-close"></i></a>
</li>
<li role="presentation" class="tab-list">
<a href="#home1" rel="external nofollow" aria-controls="home" role="tab" data-toggle="tab"> 1
<i class="fa fa-remove tab-close"></i></a>
</li>
<li role="presentation" class="tab-list"><a href="#profile" rel="external nofollow" rel="external nofollow" aria-controls="profile1" role="tab" data-toggle="tab"> 1
<i class="fa fa-remove tab-close"></i></a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
</div>
<div role="tabpanel" class="tab-pane" id="profile">
</div>
<div role="tabpanel" class="tab-pane" id="home1">
</div>
<div role="tabpanel" class="tab-pane" id="profile1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script></script>
<script src="js/jquery-1.11.2-min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.tab-close').on('click', function(ev) {
var ev=window.event||ev;
ev.stopPropagation();
// tab active ， ， active， active
var gParent=$(this).parent().parent(),
parent=$(this).parent();
if(gParent.hasClass('active')){
if(gParent.index()==gParent.length){
gParent.prev().addClass('active');
$(parent.attr('href')).prev().addClass('active');
}else{
gParent.next().addClass('active');
$(parent.attr('href')).next().addClass('active');
}
}
gParent.remove();
$(parent.attr('href')).remove();
});
</script>
</body>
</html>이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
