如何像cricbuzz站点那样在分页中创建标签？

Question

我正在尝试创建一个板球排名的测试，ODI和t20的页面，像ASP.Net MVC的板球。我需要创建分页和标签组合，使第一个必须包括测试，ODI和t20，而第二个必须包括击球手，保龄球手和球队排名，我必须链接相应的标签和分页。

​

​

代码是

  <h2><b><i>Ranking</i></b></h2>
<br>

<div>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#teams">Teams</a></li>
        <li><a data-toggle="tab" href="#batsmen">Batsmen</a></li>
        <li><a data-toggle="tab" href="#bowlers">Bowlers</a></li>
        <li><a data-toggle="tab" href="#allrounders">All rounders</a></li>
    </ul>
</div>

<ul id="paginationId" class="pagination">
    <li class="active"><a data-toggle="tab" href="#test">Test</a></li>
    <li><a data-toggle="tab" href="#odi">ODI</a></li>
    <li><a data-toggle="tab" href="#t20">T20</a></li>
</ul>

<div class="tab-content">
    <div id="test" class="tab-pane fade in active">@Html.Action("TeamTestRanking")</div>
    <div id="odi" class="tab-pane fade in">@Html.Action("TeamODIRanking")</div>
    <div id="t20" class="tab-pane fade in">@Html.Action("Teamt20Ranking")</div>
</div>

Answer 1

如果你想要“子”标签，那就制作嵌套的标签页和控件。请参见下面的示例。

<div>
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#teams">Teams</a></li>
        <li><a data-toggle="tab" href="#batsmen">Batsmen</a></li>
        <li><a data-toggle="tab" href="#bowlers">Bowlers</a></li>
        <li><a data-toggle="tab" href="#allrounders">All rounders</a></li>
    </ul>
</div>

<div class="tab-content">

    <div class="tab-pane fade active show" id="teams" role="tabpanel">

        <ul id="paginationId1" class="pagination">
            <li class="active"><a data-toggle="tab" href="#test_1">Test</a></li>
            <li><a data-toggle="tab" href="#odi_1">ODI</a></li>
            <li><a data-toggle="tab" href="#t20_1">T20</a></li>
        </ul>

        <h1>Teams</h1>

        <div class="container">
            <div class="tab-content">
                <div class="tab-pane fade active show" id="test_1" role="tabpanel">
                    <h2>Test Teams</h2>
                </div>
                <div class="tab-pane fade" id="odi_1" role="tabpanel">
                    <h2>ODI Teams</h2>
                </div>
                <div class="tab-pane fade" id="t20_1" role="tabpanel">
                    <h2>T20 Teams</h2>
                </div>
            </div>
        </div>

    </div>

    <div class="tab-pane fade" id="batsmen" role="tabpanel">

        <ul id="paginationId2" class="pagination">
            <li class="active"><a data-toggle="tab" href="#test_2">Test</a></li>
            <li><a data-toggle="tab" href="#odi_2">ODI</a></li>
            <li><a data-toggle="tab" href="#t20_2">T20</a></li>
        </ul>

        <h1>Batsmen</h1>

        <div class="container">
            <div class="tab-content">
                <div class="tab-pane fade active show" id="test_2" role="tabpanel">
                    <h2>Test Batsmen</h2>
                </div>
                <div class="tab-pane fade" id="odi_2" role="tabpanel">
                    <h2>ODI Batsmen</h2>
                </div>
                <div class="tab-pane fade" id="t20_2" role="tabpanel">
                    <h2>T20 Batsmen</h2>
                </div>
            </div>
        </div>

    </div>
    <div class="tab-pane fade" id="bowlers" role="tabpanel">
        <h1>Bowlers</h1>
    </div>
    <div class="tab-pane fade" id="allrounders" role="tabpanel">
        <h1>All rounders</h1>
    </div>
</div>