单个商家供应商的多个菜单

Question

我们正在尝试创建一个菜单列表，该列表可以在我们的网站上显示，就像在图像中一样。我们选择不同的标签时，我们希望更改菜单项。如何才能做到这一点？我们在这里编码很新。提前谢谢。

Answer 1

首先我建议您阅读有关jQuery Tab的内容非常简单。您也可以使用此代码。 只需在页面中包含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;   
}