0
탭 시스템을 사용하여 콘텐츠를 구성하는 페이지가 있습니다. 이렇게하려면 'Tabify'jQuery 플러그인 (아래 코드)을 사용했습니다.탭 메뉴에 드롭 다운 메뉴를 추가하는 방법
지금해야 할 일은 탭 중 하나에 드롭 다운 메뉴를 추가하여이 탭의 하위 섹션을 만들 수 있습니다.
문제는 탭 스크립트가 UL 요소의 직접 하위에서만 작동하는 것입니다. 즉, 드롭 다운에 대한 추가 UL 및 LI 요소가 매우 이상하게 작동합니다.
내가 조금 jQuery를 관리하지만, 작업에 스크립트 코드를 편집하면 나를 넘어 슬프게도입니다 수 있습니다.
누구나 내가 어떻게 작동하는지 알 수 있습니까? 사전에
감사합니다,
톰
HTML :
<!-- TABS -->
<div class="container">
<ul id="tab-menu">
<li class="active"><a href="#tab1">Tab 1</a></li>{/if}
<li>
<a href="#tab2">Tab 2</a>
<ul class="sub_sub_menu">
<li><a href="#dropdown1">Overview</a></li>
<li><a href="#dropdown2">Floorplans</a></li>
<li><a href="#dropdown3">Specifications</a></li>
</ul>
</li>
<li><a href="#tab3">Tab 3</a></li>
<li><a href="#tab4">Tab 4</a></li>
</ul>
</div>
<!-- CONTENT -->
<div class="container">
<div id="tab1">
<p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab2">
<div id="dropdown1">
<p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown2">
<p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="dropdown3">
<p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>
<div id="tab3">
<p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
<div id="tab4">
<p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
</div>
</div>
JS :
(function(a) {
a.fn.extend({
tabify: function(e) {
function c(b) {
hash = a(b).find("a").attr("href");
return hash = hash.substring(0, hash.length - 4)
}
function f(b) {
a(b).addClass("active");
a(c(b)).show();
a(b).siblings("li").each(function() {
a(this).removeClass("active");
a(c(this)).hide()
})
}
return this.each(function() {
function b() {
location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
}
var d = this,
g = {
ul: a(d)
};
a(this).find("li a").each(function() {
a(this).attr("href", a(this).attr("href") + "-tab")
});
location.hash && b();
setInterval(b, 100);
a(this).find("li").each(function() {
a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
});
e && e(g)
})
}
})
})(jQuery);
$(document).ready(function($){
$("#tab-menu").tabify();
});
부트 스트랩 탭을 사용하는 이유는 무엇입니까? –
내게 알려 주셔서 감사합니다. 내가 탭을 사이트의 많은 장소에서 사용되지만 당신이 내게 알려 주셔서 감사드립니다 수 있다면이 일을하고 싶습니다. 좋은 계획을 가지고있다. –