在Bootstrap上选择Tabular菜单会回到父链接

时间:2016-07-06 16:16:53

标签: javascript jquery twitter-bootstrap bootstrap-tabs

我的项目是在本地链接中设置的:

  

本地主机:12345 / index.html的#/ BookCollection

在此页面中,Bootstrap有3个Tab组件。最近,过去和过度出现

当我点击任何这些标签时,我会被带回:

  

本地主机:12345 / index.html的#/

它应该是:

  

本地主机:12345 / index.html的#/ BookCollection#最近

其他两个标签链接是:

  

本地主机:12345 / index.html的#/ BookCollection#过去

     

本地主机:12345 / index.html的#/ BookCollection#即将到来的

请注意,我不允许在下面更改此链接结构:

  

本地主机:12345 / index.html的#/ BookCollection

这是我正在使用的Bootstrap组件:

 <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#Recent">Recent</a></li>
      <li><a data-toggle="tab" href="#Past">Past</a></li>
      <li><a data-toggle="tab" href="#UpComing">UpComing</a></li>
 </ul>

<div class="tab-content">

 <div id="Recent" class="tab-pane fade in active">
   <h3>Recent Books</h3>
   <p>Some content.</p>
 </div>

 <div id="Past" class="tab-pane fade">
  <h3>Past Books</h3>
  <p>Some content in Past Books.</p>
 </div>

 <div id="UpComing" class="tab-pane fade">
  <h3>UpComing books</h3>
  <p>Some content in UpComing books.</p>
 </div>

</div>

我需要Bootstrap中的Tabs组件才能工作。

我该如何解决?

1 个答案:

答案 0 :(得分:1)

您的代码段似乎运行正常。也许您可以解释一下(并使用像bootply这样的站点,因为无法访问本地主机)。

请参阅此处的代码段: http://www.bootply.com/Ny6q4guDgk