Change bootstrap modal tabs from dropdown menu (same page)

Question

Trying to change tabs from the dropdown menu for my bootstrap tabs on the same page.

Here's the dropdown menu code:

<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>

Here's the jQuery, where I'm trying to get rid of the /menuu/ that is in the link aswell with replaceing it with nothing.

<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>

My code isn't unfortunately working. Any advice why?

Answer 1

this should help you..

  $('.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>