3

*（MSV、HOF、TOES）の下の3つのdivのそれぞれを、それぞれの尊敬されるタブに分割する方法がわかりません。タブが機能し、正しく表示されます。タブの痛みを表示させることができません。

コードは次のとおりです。

<p><i class="icon-heart"></i>&nbsp;Progression</p>

<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
  <li class="active"><a data-toggle="tab" href="#MSV">MSV</a></li>
  <li><a data-toggle="tab" href="#TOES">ToES</a></li>
  <li><a data-toggle="tab" href="#HoF">HoF</a></li>
</ul>

<div class="tab-content">
<ul class="nav nav-list">

<div class="tab-pain active" id="MSV">
    <li>Mogu'shan Vaults</li>
        <a rel="tooltip" title="Normal">
        <li>
        <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;">6/6</div>
        </div>
        </li>
        </a>

        <a rel="tooltip" title="Heroic">
        <li>
        <div class="progress">
        <div class="bar bar-active" style="width: 3%;"></div>
        <div class="bar bar-danger" style="width: 97%;">0/6</div>
        </div>
        </li>
        </a>
</div>

<div class="tab-pain" id="HOF">
    <li>Heart of Fear</li>
        <a rel="tooltip" title="Normal">
        <li>
        <div class="progress progress-striped active">
        <div class="bar" style="width: 20%;">1/6</div>
        </div>
        </li>
        </a>
</div>      

<div class="tab-pain" id="TOES">        
    <li>Terrace of Endless Spring</li>
        <a rel="tooltip" title="Heroic"><li>
        <div class="progress">
        <div class="bar bar-active" style="width: 3%;"></div>
        <div class="bar bar-danger" style="width: 97%;">0/6</div>
        </div>
        </li>
        </a>
</div>
</div>
</ul>

<script>
$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
})
</script>
4

1 に答える 1

4

以下のコードを試してください。あなたがする必要があるのは、の<Ul>内側を削除して、の代わりに<div class="tab-content">使用することです。また、hrefをhref = "＃HoF"からhref = "＃HOF"に変更します。<div class="tab-pane"><div class="tab-pain">

<p>
    <i class="icon-heart"></i>&nbsp;Progression</p>
<ul class="nav nav-tabs" id="myTab" data-tabs="tabs">
    <li class="active"><a data-toggle="tab" href="#MSV">MSV</a></li>
    <li><a data-toggle="tab" href="#TOES">ToES</a></li>
    <li><a data-toggle="tab" href="#HOF">HoF</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="MSV">
        <li>Mogu'shan Vaults</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 100%;">
                        6/6</div>
                </div>
            </li>
        </a><a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="HOF">
        <li>Heart of Fear</li>
        <a rel="tooltip" title="Normal">
            <li>
                <div class="progress progress-striped active">
                    <div class="bar" style="width: 20%;">
                        1/6</div>
                </div>
            </li>
        </a>
    </div>
    <div class="tab-pane" id="TOES">
        <li>Terrace of Endless Spring</li>
        <a rel="tooltip" title="Heroic">
            <li>
                <div class="progress">
                    <div class="bar bar-active" style="width: 3%;">
                    </div>
                    <div class="bar bar-danger" style="width: 97%;">
                        0/6</div>
                </div>
            </li>
        </a>
    </div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    })
</script>
于 2012-11-20T00:52:10.177 に答える