如何让引导选项卡链接链接到 ruby on rails 中的另一个部分文件以显示内容？
Posted
技术标签:
【中文标题】如何让引导选项卡链接链接到 ruby on rails 中的另一个部分文件以显示内容？【英文标题】：How to have bootstrap tab links link to another partial file in ruby on rails to display content? 【发布时间】：2020-11-04 07:25:36 【问题描述】：我目前正在尝试将 Bootstrap 选项卡合并到我的应用程序中。当我单击每个选项卡时，我希望内容也有所不同。但是，我不确定如何使用 rails 语言来做到这一点。目前，我正在尝试像这样渲染我的部分：
ul class="nav nav-tabs justify-content-center">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
<%= render :partial => "teams_list", locals: teams: @teams %>
</li>
</ul>
任何帮助将不胜感激！
【问题讨论】：
【参考方案1】：我使用引导程序来获取导航选项卡。这是一个非常简单的实现。我在这里展示了一些静态数据。您可以在这里轻松使用 ruby 代码。我最初使用 js 选择第一个选项卡。您可以通过将其从代码 sn-p 中删除来轻松检查它。
$(function ()
$('#myTab li:first-child a').tab('show')
)<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container tab-bar">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="false">By
Tab1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="true">Tab2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<div class="container">
<div class="row p-2">
<div class="col-sm-3 col-md-2 p-2">Tab1--Child1</div>
<div class="col-sm-3 col-md-2 p-2">Tab1--Child2</div>
<div class="col-sm-3 col-md-2 p-2">Tab1--Child3</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
<div class="container">
<div class="row p-2">
<div class="col-sm-3 col-md-2 p-2">Tab2--Child1</div>
<div class="col-sm-3 col-md-2 p-2">Tab2--Child2</div>
<div class="col-sm-3 col-md-2 p-2">Tab2--Child3</div>
<div class="col-sm-3 col-md-2 p-2">Tab2--Child4</div>
<div class="col-sm-3 col-md-2 p-2">Tab2--Child5</div>
<div class="col-sm-3 col-md-2 p-2">Tab2--Child6</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional javascript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>我是在使用 partial 的选项卡中提及 ruby 代码。
<div class="tab-content">
<div class="tab-pane" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<div class="container">
<div class="row p-2">
<% @teams.each do |team| %>
<div class="col-sm-3 col-md-2 p-2">
<%= render partial: 'team', locals:team:team %>
</div>
<% end %>
</div>
</div>
</div>
</div>
【讨论】：
以上是关于如何让引导选项卡链接链接到 ruby on rails 中的另一个部分文件以显示内容？的主要内容，如果未能解决你的问题，请参考以下文章