Tab选项卡

最后更新: | 浏览次数: 126|组件以及效果

点击切换

See the Pen Untitled by Huijun Yang (@hongge) on CodePen.

移动切换

可以在button上面添加data-hover属性实现移动切换效果

See the Pen Slide to switch tab by Huijun Yang (@hongge) on CodePen.

循环分类介绍

    <div class="home-overview">
        <div class="container-xl">
            <div class="row">
                <div class="col-12 col-lg-4">
                    <ul class="nav nav-tabs">
                            @foreach (var item in Cms.GetGroup("company-facts"))
                            {
                                <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#cate-@item.Id">@item.Name</button></li>
                            }
                        </ul>
                </div>
                <div class="col-12 col-lg-8">
                    <div class="tab-content">
                        @foreach (var item in Cms.GetGroup("company-facts"))
                        {
                            <div class="tab-pane" id="cate-@item.Id">
                                @item.Summary
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </div>

循环分类产品

    <div class="home-product">
        <div class="container-xl">
            <ul class="nav nav-tabs">
                @foreach (var item in Cms.GetGroup("company-facts"))
                {
                    <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#cate-@item.Id">@item.Name</button></li>
                }
            </ul>
            <div class="tab-content">
                @foreach (var item in Cms.GetGroup("company-facts"))
                {
                    <div class="tab-pane fade" id="cate-@item.Id">
                        <div class="row  row-cols-2 row-cols-md-3 row-cols-lg-4">
                            @foreach (var item1 in Cms.Top(ProductAttr.Default, 4, item.Id))
                            {
                                <div class="col d-flex">
                                    <div class="item-col product-col">
                                        <a href="@Cms.Url(item1)" class="thumbnail"><img src="@item1.Thumb" alt="@item1.ThumbCaption" width="@item1.Thumbs[0].Width" height="@item1.Thumbs[0].Height" loading="lazy" /></a>
                                        <div class="entry-wrapper">
                                            <h3 class="entry-title">@Cms.Link(item1)</h3>
                                        </div>
                                    </div>
                                </div>
                            }
                        </div>

                    </div>
                }
            </div>
        </div>
    </div>