0
탭 안에서 탭을 실행하고 싶습니다. 이것은 문제없이 실행되는 첫 번째 탭 섹션입니다.다른 탭에서 탭 섹션을 만드는 방법은 무엇입니까?
<div id="tabs2" class="tabs">
<ul>
<li class="skew-25 active">
<a class="skew25" href="#"> 1 tab</a>
</li>
<li class="skew-25"></li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;"> 1 tab output</div>
<div class="tab-panel" style="display: none;">2 tab output</div>
<div class="tab-panel" style="display: none;">3 tab output</div>
</div>
</div>
이제 I 위의 ('탭 출력 "이라고도 함) 구간 내에서 다른 탭을 포함
<div id="tabs4" class="tabs tabs-vertical">
<ul>
<li class="skew-25 active">tab within tab section</li>
<li class="skew-25">
<a class="skew25" href="#"></a>
</li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;">content</div>
<div class="tab-panel" style="display: none;"></div>
<div class="tab-panel" style="display: none;"></div>
</div>
</div>
'1 개 탭 출력 '2 탭 출력'의 난 등이 두 번째 코드 및 '3 탭 출력'
문제는 출력하지 않습니다. 선택하지 않거나 첫 번째 탭의 탭에 적용 할 때 활성화되지 않습니다. 이 문제를 해결하는 방법?
Javascript를은 다음과 같습니다
function(e) {
if (!$(this).parent().hasClass('active')) {
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
} else {
return false;
}
}
및
f = v.handle = function(e) {
return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}
정상
/* ================ Tabs. ================ */
$.fn.tabs = function(options) {
var defaults = {
direction: ''
};
var options = $.extend({}, defaults, options);
if(options.direction == "vertical"){
$(this).addClass('tabs-vertical');
}
var tabsUl = $(this).find(' > ul'),
activeTab = tabsUl.find('li.active').index(),
tabsPane = $(this).find('.tabs-pane');
tabsPane.find('.tab-panel').fadeOut();
tabsPane.find('.tab-panel').eq(activeTab).fadeIn();
tabsUl.find('li').find('a').click(function(e){
if(!$(this).parent().hasClass('active')){
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
}else{
return false;
}
});
}