Question

我正在尝试创建一个页面，用于测试，ODI和t20的板球排名，如ASP.Net MVC中的cricbuzz。我需要创建分页和选项卡，使第一个必须包含Test，ODI和t20，而第二个必须包含击球手，保龄球和球队排名，并且我必须相应地链接这些选项卡和分页。

Sample Image

代码是

  <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>

如何在分页内创建标签，例如cricbuzz网站？

1 个答案: