MVC引导程序选项卡自动生成

时间:2020-08-24 20:15:57

标签: css model-view-controller

我正在MVC中编写一小段代码,我已经设置了代码以根据传入的数据自动生成制表符。

当然,在生成选项卡时,如果我单击一个并单击另一个选项卡,它们都保持打开状态。我想知道是否有人遇到或有办法解决这个问题,当我单击一个选项卡时,它会关闭最后一个并打开另一个。如果我将活动班级放在选项卡页面中,它们将全部处于活动状态。

到目前为止,这是我的看法

<div id="exTab1" class="container">
    <ul id="myTab" class="nav nav-tabs">
        @foreach (var titleItem in selection)
        {
            <li><a class="tab-link" href="#@titleItem.Id" data-toggle="tab">@titleItem.Value("tabTitle")</a></li>                
        }
    </ul>
    @foreach (var contentITem in selection)
    {
        <div class="tab-content clearfix">
            <div id="@contentITem.Id" class="tab-pane active">
                @contentITem.Value("tabPanelContent")
            </div>
        </div>
    }
</div>

编辑: 我最终想出了办法,以后遇到任何问题的人,这就是我经过几次Google搜索后所做的事情

<div class="container">
<div class="tab_container">
    @{
        var countlink = 1;
        foreach (var itemsHeader in selection)
        {
            <input id="@("tab"+countlink)" type="radio" name="tabs" checked>
            <label for="@("tab"+countlink)"><i class="fa fa-code"></i><span>@itemsHeader.Value("Title")</span></label>
            countlink++;
        }
        var count = 1;
        foreach (var itemsContent in selection)
        {
            <section2 id="@("tab"+count)" class="tab-content">
                <h3>@itemsContent.Value("Title")</h3>
                <p>
                    @itemsContent.Value("Content")
                </p>

            </section2>
            count++;
        }
    }
</div>

0 个答案:

没有答案
相关问题