Bootstrap下拉列表，用于在Ruby on Rails中进行过滤

Question

我是Ruby on Rails的新手，我在重写代码时遇到问题。 我有一个可用作过滤器的标签。 这是源代码

 <ul class="nav nav-tabs groups-tabs"> <li role="presentation" class="active"> <%= link_to 'All', "#all", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="active"> <%= link_to 'Python', "#python", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="<%= ''%>"> <%= link_to "Algorithms", "#algorithms", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="<%= ''%>"> <%= link_to "Web", "#web", role: "tab", :"data-toggle" => "tab" %> </li> </ul> <div class="tab-content table-responsive" role="tablist"> <div role="tabpanel" class="tab-pane active" id="all"> <%= render 'requests',requests: @requests%> </div> <div role="tabpanel" class="tab-pane " id="python"> <%= render 'requests',requests: @requests.python%> </div> <div role="tabpanel" class="tab-pane" id="algorithms"> <%= render 'requests',requests: @requests.algorithms%> </div> <div role="tabpanel" class="tab-pane" id="web"> <%= render 'requests',requests: @requests.web%> </div> </div> 

现在，我正在尝试将此逻辑重写为Bootstrap中的“ Dropdown”组件。 它启动时没有错误，但是在单击下拉部分后-它们变为无效：

这是下拉列表，它变为非活动状态

这是下拉菜单的代码：

 <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"> <%= link_to 'All', "#all", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="active"> <%= link_to 'Python', "#python", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="<%= ''%>"> <%= link_to "Algorithms", "#algorithms", role: "tab", :"data-toggle" => "tab" %> </li> <li role="presentation" class="<%= ''%>"> <%= link_to "Web", "#web", role: "tab", :"data-toggle" => "tab" %> </li> </ul> </div> 

还有一个问题：为了正确执行引导程序，必须替换哪些类，角色，数据切换？

Answer 1

我希望这是您要寻找的。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="nav nav-tabs" role="tablist"> <li class="dropdown"> <a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents"> <li class="active"> <a href="#all" role="tab" data-toggle="tab" aria-controls="all">All</a> </li> <li> <a href="#python" role="tab" data-toggle="tab" aria-controls="python">Python</a> </li> <li> <a href="#algorithms" role="tab" data-toggle="tab" aria-controls="algorithms">Algorithms</a> </li> <li> <a href="#web" role="tab" data-toggle="tab" aria-controls="web">Web</a> </li> </ul> </ul> <div class="tab-content table-responsive" role="tablist"> <div role="tabpanel" class="tab-pane active" id="all"> All tab content </div> <div role="tabpanel" class="tab-pane " id="python"> Python tab content </div> <div role="tabpanel" class="tab-pane" id="algorithms"> Algorithms tab content </div> <div role="tabpanel" class="tab-pane" id="web"> Web tab content </div> </div>