單個商家供應商的多種菜單

Question

我們正在嘗試創建一個菜單列表，可以像在圖像中一樣顯示在我們的網站上。當我們選擇不同的標籤頁時，我們希望菜單項發生變化。如何才能做到這一點？我們對這裏的編碼很新穎。提前致謝。

Answer 1

這很容易首先，我建議你閱讀有關jQuery的Tabs.You也可以使用此代碼。 只需將jQuery庫包含到您的頁面中即可粘貼此代碼，您將獲得所需內容。

HTML代碼

<div id="tabs-container"> 
<ul class="tabs-menu"> 
    <li class="current"><a href="#tab-1">Tab 1</a></li> 
    <li><a href="#tab-2">Tab 2</a></li> 
    <li><a href="#tab-3">Tab 3</a></li> 
    <li><a href="#tab-4">Tab 4</a></li> 
</ul> 
<div class="tab"> 
    <div id="tab-1" class="tab-content"> 
     <p>This is Tab 1</p> 
    </div> 
    <div id="tab-2" class="tab-content"> 
     <p>This is Tab2 </p> 

    </div> 
    <div id="tab-3" class="tab-content"> 
     <p>This is Tab3 </p> 
    </div> 
    <div id="tab-4" class="tab-content"> 
     <p>This is Tab4</p> 
    </div> 
</div> 

腳本代碼

$(document).ready(function() { 
    $(".tabs-menu a").click(function(event) { 
     event.preventDefault(); 
     $(this).parent().addClass("current"); 
     $(this).parent().siblings().removeClass("current"); 
     var tab = $(this).attr("href"); 
     $(".tab-content").not(tab).css("display", "none"); 
     $(tab).fadeIn(); 
    }); 
}); 

CSS代碼是

.tab-content { 
    display: none; 
} 

#tab-1 { 
display: block; 
}