Why does my link break (stop navigating to its location) when I use data-toggle attribute?

问题

I am having a play around with Bootstrap 4 in Rails 5 and I am trying to get a data-toggle to work on nav-pills.

With my code below, the pill toggle works and it breaks the link_to part of the code and the link doesn't work.

<div class="card">
  <div class="card-block">
    <ul class="nav nav-pills nav-justified" role="tablist">
      <%= link_to 'All Things', all_things_path, class: 'nav-link nav-item active' %>
      <%= link_to 'Some Things', some_things_path(@things[0]), class: 'nav-link nav-item', "data-toggle" => "pill" %>
    </ul>
  </div>
</div>

If I remove the "data-toggle" => "pill" the link works fine and routes to the collection as required.

I have also tried using data: { toggle: "pills" } but this also breaks the link.

Anyone got any ideas?

回答1:

If by "breaking the link", you mean that browser no longer navigates to a new page, then it's because bootstrap's javascript intercepts the click on the link to do the toggling.

Clicking on a link takes you to its location, a new page. Clicking a toggle element shows/hides some other element on the current page. You can't have both.

来源：https://stackoverflow.com/questions/44445740/why-does-my-link-break-stop-navigating-to-its-location-when-i-use-data-toggle