使用data-toggle属性时，为什么我的链接断开(停止导航到其位置)? [英] Why does my link break (stop navigating to its location) when I use data-toggle attribute?

问题描述

我正在Rails 5中试用Bootstrap 4，我正在尝试让data-toggle在nav-pills上工作.

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.

在下面的代码中，pill切换键起作用，它破坏了代码的link_to部分，链接不起作用.

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>

如果我删除了"data-toggle" => "pill"，则链接可以正常工作，并根据需要路由到集合.

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

我也尝试过使用data: { toggle: "pills" }，但这也会断开链接.

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

有人有什么主意吗?

推荐答案

如果通过断开链接"来表示浏览器不再导航到新页面，那是因为引导程序的javascript拦截了对链接的点击切换.

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.

这篇关于使用data-toggle属性时，为什么我的链接断开(停止导航到其位置)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！