모달을 여는 앵커 태그와 함께 부트 스트랩 4 모달을 사용하고 있습니다. 이 같은:
<div class="experience">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-3">
<div class="btn-sensory-container">
<a href="#energise-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-energise-2-outline btn-sensory"> <i class="img-energise"></i>Energise me</a>
</div>
</div>
<div class="col-xs-6 col-md-6 col-lg-3">
<div class="btn-sensory-container">
<a href="#renew-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-renew-3-outline btn-sensory"><i class="img-renew"></i> Renew me</a>
</div>
</div>
<div class="col-xs-6 col-md-6 col-lg-3">
<div class="btn-sensory-container">
<a href="#mind-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-mind-2-outline btn-sensory"><i class="img-mind"></i> Mind me</a>
</div>
</div>
<div class="col-xs-6 col-md-6 col-lg-3">
<div class="btn-sensory-container">
<a href="#illuminate-me" data-toggle="modal" data-target="#modal-sensory" class="btn btn-illuminate-2-outline btn-sensory"><i class="img-illuminate"></i> Illuminate me</a>
</div>
</div>
</div>
</div>
</div>
앵커 탭이 모달을 열고 특정 탭을 활성화하기를 원합니다. 즉 a href="#mind-me"는 모달을 열고 #mind-me섹션을 활성화 해야합니다 . HTML 또는 일부 jQuery를 사용하여 이것이 가능한지 알고 싶습니다.
모달의 나머지 코드는 다음과 같습니다.
<div class="modal fade modal-sensory" id="modal-sensory" tabindex="-1" role="dialog" aria-labelledby="modalsensory" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header sensory">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">X</span>
</button>
<!-- Nav tabs -->
<ul class="nav nav-tabs red tabs-3" role="tablist">
<li class="nav-item" role="presentation">
<a href="#energise-me" class="nav-link" aria-controls="energise-me" role="tab" data-toggle="tab"> <span>Energise Me</span> </a>
</li>
<li class="nav-item" role="presentation">
<a href="#renew-me" class="nav-link" aria-controls="renew-me" role="tab" data-toggle="tab"> <span>Renew Me</span> </a>
</li>
<li class="nav-item" role="presentation">
<a href="#mind-me" class="nav-link" aria-controls="mind-me" role="tab" data-toggle="tab"> <span>Mind Me</span> </a>
</li>
<li class="nav-item" role="presentation">
<a href="#illuminate-me" class="nav-link" aria-controls="illuminate-me" role="tab" data-toggle="tab"> <span>Illuminate Me</span> </a>
</li>
</ul>
</div>
<div class="modal-body">
<div class="sensory-items col-lg-12 col-md-12 col-sm-12 col-xs-12">
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="mind-me">
<p>Energise me</p>
</div><!-- end tab-pane -->
<div role="tabpanel" class="tab-pane" id="mind-me">
<p>Renew me</p>
</div><!-- end tab-pane -->
<div role="tabpanel" class="tab-pane" id="mind-me">
<p>Mind me</p>
</div><!-- end tab-pane -->
<div role="tabpanel" class="tab-pane" id="mind-me">
<p>Illuminate me</p>
</div><!-- end tab-pane -->
</div><!-- end tab-content -->
</div><!-- end sensory-items -->
</div><!-- end modal-body -->
</div><!-- end modal-content -->
</div><!-- end modal-dialog -->
</div><!-- end modal -->
show.bs.modal이벤트 에서 twitter-bootstrap 3과 동일합니다 .
$('#modal-sensory').on('show.bs.modal', function (event) {
// Button that triggered the modal
var button = $(event.relatedTarget)
// the modal
var modal = $(this);
//show tab
modal.find('[href="'+button.attr("href")+'"]').tab('show');
});
jsfiddle의 예 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다