javascript - 从下拉菜单更改 Bootstrap 模式选项卡(同一页面)

Question

尝试从下拉菜单中更改同一页面上我的 Bootstrap 选项卡的选项卡。

这是下拉菜单代码:

<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 <li><a class="menu-link" href="/menuu/#day">Day</a></li>
 <li><a class="menu-link" href="/menuu/#night">Night</a></li>
 <li><a class="menu-link" href="/menuu/#drinks">Joogid</a></li>
 <li><a class="menu-link" href="/menuu/#takeaway">Takeaway</a></li>
</ul>

这是 jQuery，我试图删除链接中的/menuu/，将其替换为空。

<script>
  $(function () {
    $('.menu-link').click(function (e) {
        e.preventDefault();
         var str = this.href;
         this.href = str.replace('/menuu/', '');
        $('a[href="' + $(this).attr('href') + '"]').tab('show');
    })
});
</script>

不幸的是，我的代码无法运行。有什么建议吗？

Answer 1

这应该对你有帮助..

  $('.menu-link').each(function(e) {
    $(this).attr('href', $(this).attr("href").replace( /\/menuu\//gi, '' ) );
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <li><a class="menu-link" href="/menuu/#day">Day</a></li>
      <li><a class="menu-link" href="/menuu/#night">Night</a></li>
      <li><a class="menu-link" href="/menuu/#drinks">Joogid</a></li>
      <li><a class="menu-link" href="/menuu/#takeaway">Takeaway</a></li>
    </ul>
   </div>
</div>