javascript - 访问选项卡+向其中添加内容

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