无法使用 ruby (link_to) 方法使用引导可切换选项卡答案

<div role="tabpanel">  <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul>  <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">...</div> <div role="tabpanel" class="tab-pane" id="profile">...</div> <div role="tabpanel" class="tab-pane" id="messages">...</div> <div role="tabpanel" class="tab-pane" id="settings">...</div> </div> </div>

<div role="tabpanel"> <ul id="my_menu a" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><%= link_to "Main", root_path, :role => "tab", :data => {:toggle => "tab"} %></li> <li role="presentation"><%= link_to "Profile", profile_path, :role => "tab", :data => {:toggle => "tab"} %></li> <li role="presentation"><%= link_to "Projects", projects_path, :role => "tab", :data => {:toggle => "tab"} %></li> </ul> </div> <script> $('#my_menu a').click(function (e) { e.preventDefault() $(this).tab('show') }) </script>

【解决方案1】：

有一个我发现更简单的替代解决方案：

您可以在使用 ruby link_to 助手时将基本类添加到菜单项周围的所有元素中，然后使用 ruby 助手函数将活动类添加到您当前所在的页面。这意味着选项卡会显示并正确突出显示。

例如在您的 nav.html.erb 部分中：

<nav class="container-fluid">
      <ul class="nav nav-tabs">
        <li class="<%= cp(root_path)%>" role="presentation"><%= link_to "Home", root_path %></li>
          <li class="<%= cp(user_list_path)%>" role="presentation"><%= link_to "All users", user_list_path, class: cp(user_list_path) %></li>
          <li class="<%= cp(my_profile_path)%>" role="presentation"><%= link_to "#{current_user.username}", my_profile_path %></li>
      </ul>
    </nav>

在你的application_helper.rb

def cp(path)
      "active" if current_page?(path)
    end

【讨论】：

感谢您的回答！实际上，我不久前就停止了该项目的工作，但我很欣赏了解解决问题的新方法。

【解决方案2】：

通过 JavaScript 启用可选项卡（每个选项卡需要单独激活）。

在你的 application.js 或相应的 js 文件中添加这个：

$('#my_menu a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

并给你的<ul> 一个ID：

<ul id="my_menu" class="nav nav-tabs" role="tablist">

更新：

这是完整的sn-p：

<div role="tabpanel">
  <!-- Nav tabs -->
  <ul id="my_menu" class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><%= link_to "Main", '#home', :role => "tab", :data => {:toggle => "tab"} %></li>
      <li role="presentation"><%= link_to "Profile", '#profile', :role => "tab", :data => {:toggle => "tab"} %></li>
      <li role="presentation"><%= link_to "Projects", '#messages', :role => "tab", :data => {:toggle => "tab"} %></li>
    </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="messages">...</div>
  </div>
</div>

<script>
$('#my_menu a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
</script>

【讨论】：

我刚刚尝试了您的建议，但仍然没有运气。我更新了问题中的代码以准确显示我目前拥有的内容。我可以让标签出现，但点击它们什么也没做。我想指出，当我用“#”替换 (root_path) 时，选项卡似乎可以工作。当我尝试将它们链接到我遇到问题的实际页面时。
更新了我的答案，看看有没有帮助。
我试过你的建议，不幸的是我仍然有同样的问题。我什至尝试使用方法，但它给了我同样的问题。当我创建一个空白链接“#”时，这些选项卡似乎才起作用。
有没有办法可以访问我的文件（使用 github？）来检查我的代码以及是否缺少某些内容？我正在制作一个非常基本的网络应用程序，而且它还处于早期阶段。到目前为止，我只设置了导航栏的主页。我对编程很陌生，所以请原谅我的无知。
@RashedAl-Julaibi，你不能做你想做的事。你必须使用带有'#'的锚，我已经更新了我的答案。这是你可以尝试的最后一件事。