bootstrap-菜单定位

bootstrap-菜单定位

Bootstrap的菜单定位模板：
html 代码片段

$('#myTabs a[href="#profile"]').tab('show') // Select tab by name
$('#myTabs a:first').tab('show') // Select first tab
$('#myTabs a:last').tab('show') // Select last tab
$('#myTabs li:eq(2) a').tab('show') // Select third tab (0-indexed)

通过选择器选择到标签页的每个标签a，然后执行tab()方法，传递参数show,打开a对应的标签。

做法：
给菜单中的链接设置点击事件click：点击的时候，标签页中对应的标签被识别到，识别到后，执行tab("show")方法。

1.菜单中链接href与标签中链接href都指向对应的标签页的id。
2.获取菜单中链接href属性，通过这个属性找到标签页中href属性相同的链接，执行tab("show")方法。
3.为方便获取元素，分别给菜单div与标签页div添加相应的id.

html 代码片段

<script>
  $(document).ready(function(){
    $("#bs-example-navbar-collapse-1 .dropdown-menu a").click(function () {
      var href = $(this).attr("href");

      $("#feature-tab a[href= '" + href +"']").tab("show");
    });
  });
  </script>

备注：bs-example-navbar-collapse-1 为菜单div的id。

这样就可以了。