Question

我正在开发一个使用bootstrap侧边栏导航的Web应用程序。我的网址如下：

  <div class="col-sm-3 col-md-2 sidebar __web-inspector-hide-shortcut__" style="overflow: auto;font-family:verdana;font-size: 16px;font-weight: 200;background-color: #002663;top: 0px;width: 18%;height: 700px;color: #002663;">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#generalInfo">General<span class="sr-only">(current)</span></a></li>
        <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Specific<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Config</a></li>
                <li><a href="#">Authentication</a></li>
                <li><a href="#">ETC...</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
        <li class="dropdown">
              <a href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Environments<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#env1">Env 1</a></li>
                <li><a href="#env2">Env 2</a></li>
                <li><a href="#env3">Env 3</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>

    </div>

<div class="container" style="width:80%;float:left">


      <div class="tab-content" style="padding: 22px 0px 29px 88px;">

      <div class="tab-pane fade in active" id="generalInfo"></div>


      <div class="tab-pane" id="env1"></div>


      <!-- ETC... -->
  </div>
</div>

html是：

 www.my.url.com/projectName/#env1

html的实际实现并不重要，只是为了显示我正在使用的内容类和结构。当我使用有效的href单击一个选项时，不会加载内容，而是加载为：

tab-content

当我希望它只显示隐藏的div类时。此代码适用于选项卡，但当我尝试将其修改为侧边栏时，它会停止工作。我非常确定它与tab-pane和{{1}}类有关，但我找不到有关如何更改侧栏导航的示例。任何见解都会有所帮助。

Answer 1

自己找到答案...要停止导航栏链接到其他页面，只需将<a>锚点指定为data-toggle="tab"。

使用Angular2和Bootstrap实现侧边栏导航的问题

1 个答案: