[英]JQuery Slide Onclick
我在示例http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/中使用代碼,我嘗試在div標簽上滑動單擊列表上的按鈕,則當前標簽頁內容將滑入,單擊的標簽頁將滑出。 我目前有一個工作示例,可以在div之間很好地切換,但是我需要在div之間滑動。 有沒有可以用當前代碼執行的腳本? 使用.slide或.effect而不是.show()看起來可以同時顯示兩個div。 我不確定自己在做什么錯。
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Main Screen</li>
<li tab="tab2">Div 1</li>
<li tab="tab3">Div 2</li>
<li tab="tab4">Div 3</li>
<li tab="tab5">Div 4</li>
<li tab="tab6">Div 5</li>
<li tab="tab7">Div 6</li>
<li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
<h4>Main Screen</h4>
</div>
<div class="tab-content">
<h4>Div 1</h4>
</div>
<div class="tab-content">
<h4>Div 2</h4>
</div>
<div class="tab-content">
<h4>Div 3</h4>
</div>
<div class="tab-content">
<h4>Div 4</h4>
</div>
<div class="tab-content">
<h4>Div 5</h4>
</div>
<div class="tab-content">
<h4>Div 6</h4>
</div>
<div class="tab-content">
<h4>Div 7</h4>
</div>
我的腳本看起來像
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
嘗試使用垂直jQuery UI選項卡 。 您可能需要重新設置樣式,但是我認為效果是您想要的。 您應該能夠將http://api.jqueryui.com/slide-effect/中的幻燈片效果添加到更改選項卡事件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.