Javascript 在活动链接上显示html部分/单击-使用Rails 4引导

我的Rails 4应用程序中有一个html文件，其中有一个标题和一些适用于每个相关策略的通用文本。通用文本有三个链接标签（目前没有链接到任何东西），分别是：术语、隐私、版权

然后，我的视图文件夹中有3个部分，其中包含每个策略的内容（称为_terms.html.erb、_privacy.html.erb和_copyright.html.erb）。我想在公共文本区域下方显示部分的内容，如下所示：

<%= 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崩溃：

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

上面的方法不起作用-它给出了一个错误：未定义的局部变量或方法“data”（我不知道这是什么意思）

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

如果单击某个链接，如何渲染部分，但前提是在单击其中一个链接之前渲染其中一个链接

我使用引导选项卡的全部努力是：

尝试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 %>

$（“#myTabs a”）。单击（函数（e）{
e、 预防默认值（）
$（this.tab（'show'））
})
$（“#myTabs a:first”）.tab（'show'）

当我尝试这一点，我得到丑陋的样式和标签，你可以点击。当你点击的时候什么都没有发生，考虑到还有很多其他问题，我只是稍微关心一下样式

尝试2（如果可以使用的话，我更喜欢使用这种样式）

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

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

“折叠”、“aria扩展”=>“假”、“aria控件”=>“折叠计”%>
“折叠”、“aria扩展”=>“假”、“aria控件”=>“折叠预览”%>
许可证
信任
信赖
定价
$（“#myTabs a”）。单击（函数（e）{
e、 预防默认值（）
$（this.tab（'show'））
})
$（“#myTabs a:first”）.tab（'show'）

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

渲染/局部文件中的所有文本显示在一行中（仅忽略预期的选项卡显示）

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

这些尝试之间的一个区别是，第一个尝试-当您将鼠标悬停在选项卡上时，屏幕底部显示go to#terms，而当您将鼠标悬停在第二个尝试的链接上时，屏幕底部显示go to#CollapsMeters

另一件奇怪的事情是，我改变了第二次尝试，将#术语和#隐私称为id=“terms”或id=“privacy”：

“折叠”、“aria扩展”=>“假”、“aria控件”=>“术语”%>
“折叠”、“aria扩展”=>“假”、“aria控件”=>“隐私”%>

---

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

好的，从你的问题中可以明显看出，你在寻找一个关于如何做到这一点的整体视图

有两种方法可以做到这一点：

通过ajax拉取分区（动态加载）

在页面上预加载部分并用JS显示它们

我将详细介绍这两种方法：

---

Ajax

第一个-（AsynchronousJavascriptAndXml）-是通过异步请求提取部分代码

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

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

您可以使用JQuery中的ajax包装器在单击链接后提取片段：

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

这必须伴随一些

路线

和

控制器

代码：

#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

#config/routes.rb
资源：stacs，仅限：：show
#app/controllers/stacts\u controller.rb
类StacsController<应用程序控制器
def秀
@stac=stac.find参数[：id]
回应待办事项|格式|
format.js
format.html
结束
结束
结束

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

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

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