Javascript 无法使用ruby（link_to）方法使用引导可切换选项卡

我很难使用

link\u to

view helper方法让bootstrap元素正常工作。这是我要实现的引导代码：

<div role="tabpanel">
  <!-- Nav tabs -->
  <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>

  <!-- 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 role="tabpanel" class="tab-pane" id="settings">...</div>
  </div>

</div>

...
...
...
...

我尝试了以下方法，但没有取得成功：

“tab”，：data=>{:toggle=>“tab”}%>
“tab”，：data=>{:toggle=>“tab”}%>
“tab”，：data=>{:toggle=>“tab”}%>

$（“#我的菜单a”）。单击（功能（e）{
e、 预防默认值（）
$（this.tab（'show'））
})

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

将其添加到application.js或相应的js文件中：

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

并给您的

一个

ID

：

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

---

更新：

以下是完整的代码片段：

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

“tab”，：data=>{:toggle=>“tab”}%>
“tab”，：data=>{:toggle=>“tab”}%>
“tab”，：data=>{:toggle=>“tab”}%>

...
...
...
$（“#我的菜单a”）。单击（功能（e）{
e、 预防默认值（）
$（this.tab（'show'））
})

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

您可以在使用ruby

link\u to

helpers的同时，将基本类添加到菜单项周围的所有元素中，然后使用ruby helper函数将活动类添加到您当前所在的页面中。这意味着选项卡将显示并正确高亮显示

例如，在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>

---

为什么在这里使用“数据切换”=>“模态”而不是选项卡？我提供的ruby代码只是我用来实现代码的语法示例，而不是我编写的实际代码。我使用的实际代码如下：

“tab”，：data=>{:toggle=>“tab”}%>

您尝试过我的解决方案吗？是的，我使用了我提供的代码，该代码更正了您提到的问题，但它不起作用。您是否为

提供了
ID
？我在您的
元素中没有看到任何
ID
。我只是尝试了您的建议，但仍然没有成功。我更新了问题中的代码，以准确显示我当前拥有的内容。我可以让选项卡显示出来，但单击它们什么也做不了。我想指出的是，当我将（根路径）替换为“#”时，选项卡似乎可以工作。这是当我试图将他们链接到我有问题的实际页面时。更新了我的答案，请查看是否有帮助。我尝试了你的建议，不幸的是我仍然有相同的问题。我甚至尝试过使用这种方法，但它给了我同样的问题。这些选项卡似乎只有在我创建一个空白链接“#”时才起作用。您有没有办法访问我的文件（使用github？）来检查我的代码以及是否缺少某些内容？我正在制作一个非常基础的web应用程序，它还处于非常早期的阶段。到目前为止，我只为导航栏设置了主页。“我对编程很陌生，请原谅我的无知。”拉舍达尔·朱莱比，你不能做你想做的事。你必须使用带有“#”的锚，我已经更新了我的答案。这是你最不可能尝试的。谢谢你的回答！事实上，我不久前就停止了那个项目的工作，但我很感激理解一种解决问题的新方法。
def cp(path)
      "active" if current_page?(path)
    end