显示链接上的html部分活动/点击-使用Rails4引导

Question

我的Rails 4应用程序中有一个html文件，该文件有一个标题和一些适用于每个相关策略的通用文本。通用文本有三个链接标签（当前未链接到任何内容），称为：条款、隐私、版权。

然后，我在我的视图文件夹中有3个部分，其中包含每个策略的内容（称为_terms.html.erb、_privacy.html.erb和_copyright.html.erb）

1. 当页面第一次加载时，我希望显示部分条款。

2. 当单击其中一个其他策略名称时，我希望显示相关的分部。

我尝试过如下调整Bootstrap js崩溃：

<%= link_to "Terms", data-toggle="collapseTerms", aria-expanded="false", aria-controls="collapseTerms" %>

            <div class="collapse" id="collapseTerms">
                <div class="well">
                    <%= render 'stac/terms'  %>
                </div>
            </div>  

上面的不起作用-它给出了一个错误：未定义的局部变量或方法"数据"（我不知道这意味着什么）

我该怎么做。我制作了一些js表单帮助程序，用于在创建早期表单输入之前隐藏嵌套表单的情况，但这次的情况并不完全相同，因为我希望在单击其他两个中的一个之前显示术语partial，此时，我希望相关的partial显示在公共文本下。

如果单击了一个链接，在单击其他链接之前，如何渲染其中一个链接？

我使用引导标签的全部努力是：

尝试1次

<ul id="myTabs" class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href "#terms" aria-controls="terms" role="tab" data-toggle="tab">Terms</a></li>
    <li role="presentation"><a href="#privacy" aria-controls="privacy" role="tab" data-toggle="tab">Privacy</a></li>
    <li role="presentation"><a href="#licence" aria-controls="licence" role="tab" data-toggle="tab">Licence</a></li>
    <li role="presentation"><a href="#trust" aria-controls="trust" role="tab" data-toggle="tab">Trust</a></li>
    <li role="presentation"><a href="#reliance" aria-controls="reliance" role="tab" data-toggle="tab">Reliance</a></li>
    <li role="presentation"><a href="#pricing" aria-controls="pricing" role="tab" data-toggle="tab">Pricing</a></li>
  </ul>

<div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'static/intpolicy/terms'  %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'static/intpolicy/privacy' %></div>
                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'static/intpolicy/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'static/intpolicy/trust' %></div>
                <div role="tabpanel" class="tab-pane" id="importantnotice"><%= render 'static/intpolicy/bby' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'static/intpolicy/pricing' %></div>
            </div>
<%= javascript_tag do %>
$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
$('#myTabs a:first').tab('show')
<% end %>

当我尝试这个时，我会得到丑陋的造型和你可以点击的标签。当你点击时，什么都不会发生，考虑到还有多少其他问题，我只是稍微担心一下造型。

ATTEMPT 2（如果可以工作的话，我更喜欢使用这种风格）

基本上与选项卡1相同，只是我试图让Bootstrap风格（如导航栏）的选项列表看起来更像我的其他格式：

<div role="presentation" class="intpol1","active"> <%= link_to "Terms", "#collapseTerms", 'data-toggle'=>"collapse", 'aria-expanded'=>"false", 'aria-controls'=>"collapseTerms" %></div>
            </div>
            <div class="col-sm-2">
                <div role="presentation" class="intpol1"> <%= link_to "Privacy", "#collapsePrivacy", 'data-toggle'=>"collapse", 'aria-expanded'=>"false", 'aria-controls'=>"collapsePrivacy" %></div>
            </div>
            <div class="col-sm-2">
                <div class="intpol1">Licence</div>
            </div>
            <div class="col-sm-2">
                <div class="intpol1">Trust</div>
            </div>
            <div class="col-sm-2">
                <div class="intpol1">Reliance</div>
            </div>
            <div class="col-sm-2">
                <div class="intpol1">Pricing</div>
            </div>

<div class="row">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="terms"><%= render 'static/intpolicy/terms'  %></div>
                <div role="tabpanel" class="tab-pane" id="privacy"><%= render 'static/intpolicy/privacy' %></div>
                <div role="tabpanel" class="tab-pane" id="licence"><%= render 'static/intpolicy/licence' %></div>
                <div role="tabpanel" class="tab-pane" id="trust"><%= render 'static/intpolicy/trust' %></div>
                <div role="tabpanel" class="tab-pane" id="importantnotice"><%= render 'static/intpolicy/bby' %></div>
                <div role="tabpanel" class="tab-pane" id="pricing"><%= render 'static/intpolicy/pricing' %></div>
            </div>
        </div>
    </div>
</div>  

<%= javascript_tag do %>
$('#myTabs a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})
$('#myTabs a:first').tab('show')
<% end %>

从这次尝试中，你可以看到只有前两个标签显示为链接（故意的——我没有完成这次尝试，因为前两个链接不起作用）。

渲染/部分文件中的所有文本都显示在一行中（只是忽略了预期的选项卡显示）。

我在这里面找不到任何错误。如何使用引导选项卡？我的控制台检查器显示css警告（通常带有引导程序sass，但没有错误）。

这些尝试之间的一个区别是，第一次尝试-当你将鼠标悬停在选项卡上时，屏幕底部会显示转到#terms，而当你将光标悬停在第二次尝试中的链接上时，会显示转到#collapseTerms

另一件奇怪的事情是，我把第二次尝试改为引用#terms&隐私为id="terms"或id="privacy"：

<div role="presentation" class="intpol1","active"> <%= link_to "Terms", id="#terms", 'data-toggle'=>"collapse", 'aria-expanded'=>"false", 'aria-controls'=>"terms" %></div>
                </div>
                <div class="col-sm-2">
                    <div role="presentation" class="intpol1"> <%= link_to "Privacy", id="#privacy", 'data-toggle'=>"collapse", 'aria-expanded'=>"false", 'aria-controls'=>"privacy" %></div>

这样做的效果是，当你点击术语的第二个尝试链接时，它会将页面底部的页脚向上移动，使其位于术语部分中html的开头。你再次点击条款链接，它就会消失。奇怪的是，当你点击隐私链接时，同样的事情却没有发生。

Answer 1

好吧，从你的问题中可以明显看出，你正在寻找如何做到这一点的总体观点。

有两种方法：

1. 通过ajax拉取部分（动态加载）
2. 在你的页面上预加载部分&用JS显示它们

我将详细介绍两种方法：

---

Ajax

第一个是ajax（A同步JavascriptAndXml），它是通过异步请求提取部分代码。

这基本上就是您在服务器上有额外数据的地方，您希望在当前请求的范围之外提供这些数据——IE是一个异步请求。

我们使用ajax请求有各种原因，但其中一个主要原因是让我们能够在页面加载后调用扩展功能（使应用程序更高效）。

您可以使用JQuery中的$.get ajax包装器在点击链接后提取部分：

#app/assets/javascripts/application.html.erb
$(document).on("click", "a.", function(e){
   e.preventDefault();
   url = "stac/" + $(this).attr("href");
   $.get(url);
});

这必须伴随一些routes和controller代码：

#config/routes.rb
resources :stacs, only: :show
#app/controllers/stacts_controller.rb
class StacsController < ApplicationController
   def show
      @stac = Stac.find params[:id]
      respond_to do |format|
         format.js
         format.html
      end
   end
end

这将允许您在服务器端JS:中处理响应

#app/views/stacs/show.js.erb
$("body").append("<%=j render 'specs/#{params[:id]}' %>");

---

引导

当单击其中一个其他策略名称时，我想显示相关的部分

听起来你想在Bootstrap中使用手风琴模块。

如果你问了一个关于引导的问题（我并不太熟悉），你会考虑预加载所有的部分，并用JS显示。

这很简单：

#app/views/pages.html.erb
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <% %w(terms copyright privacy).each_with_index do |folder, i| %>
       <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="heading#{i}">
              <%= link_to "Terms", data: {toggle="collapse#{folder}"}, aria: { expanded: "false", controls: "collapse#{folder}" } %>
          </div>
          <div class="collapse" id="collapse<%= folder %>">
             <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading<%= i %>">
                 <div class="panel-body">
                    <%= render 'stac/terms'  %>
                 </div>
             </div>
          </div>
       </div> 
    <% end %>
</div>