Question

这可能是个愚蠢的问题，但我对HTML并不陌生。无论如何，如果我有一堆标签like so，我如何制作它以便用户在点击它们并查看其内容时可以实际访问这些标签？更不用说，我如何首先给他们内容，因为我已经尝试遵循许多教程使用的命名约定，但出于某种原因，这并不适合我所拥有的。

任何帮助都将不胜感激。

Answer 1

http://www.bootply.com/BBgCDRQiAp

以下是您需要做的事情：

<强> HTML

<div class="navbar navbar-inverse navbar-fixed-top">
                <div class="container">

                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <div class="collapse navbar-collapse navHeaderCollapse">

                        <ul class="nav navbar-nav navbar-right" id="navtab" role="tablist">

                            <li class="active"><a href="#tab1" role="tab">Tab1</a></li>
                            <li><a href="#tab2" role="tab">Tab2</a></li>

                            <li class="dropdown">   
                                <a href="#tab3" class="dropdown-toggle" data-toggle="dropdown"><span>Tab3</span><b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#subtab1" role="tab">Subtab1</a></li>
                                    <li><a href="#subtab2" role="tab">Subtab2</a></li>
                                </ul><!-- END: "dropdown-menu" -->      
                            </li><!-- END: "dropdown" -->
                            <li><a href="#tab4">Tab4</a></li>

                        </ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->

                    </div><!-- END: "container" -->
                </div><!-- END: "container" -->
            </div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->

<br/><br/><br/>

<div class="tab-content"> <!-- HERE GOES YOUR TAB CONTENTS -->

  <div class="tab-pane active" id="tab1">The <h1>tab1</h1> content</div>
  <div class="tab-pane" id="tab2">The tab2 content</div>
  <div class="tab-pane" id="subtab1">The subtab1 content</div>
  <div class="tab-pane" id="subtab2">The subtab2 content</div>
  <div class="tab-pane" id="tab4">The tab4 content</div>
</div>

<强> JS

$('#navtab a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

<强>参考：

http://getbootstrap.com/javascript/#tabs-examples

访问标签+向其添加内容

1 个答案: