Javascript 访问选项卡+；为它们添加内容

这可能是一个愚蠢的问题，但我对HTML真的很陌生。不管怎样，如果我有一堆标签，我该如何做才能让用户在点击这些标签时真正访问它们并查看它们的内容？更不用说，我首先应该如何为他们提供内容，因为我已经尝试遵循许多教程使用的命名约定，但由于某些原因，这与我所拥有的不起作用

任何帮助都将不胜感激。

以下是您需要做的：

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>

参考资料：

---

您没有使用引导功能吗？非常感谢。我知道我的问题出在哪里了。如果我的初始页面上有预先存在的内容，比如jumbotron，当我单击某个选项卡时，如何清除该内容，使其仅显示该选项卡的内容？您可以将其隐藏$（#jumbotronDivId'）.hide（）；显示选项卡内容时调用此选项

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