Question

我正在尝试完成一个简单的bootstrap list-group来更改页面上的内容而不重新加载页面。

**我正在使用Rails和javascript / jquery上的ruby进行编码

我的HTML代码：

<div class="container">
  <div class="row row-offcanvas row-offcanvas-right">
    <div class="col-xs-12 col-sm-9">
      <div id="jumbomambo"class="jumbotron">
        <h1>Linux Administration</h1><br />
        <p>Teachers Name <%= link_to "Send Message", "#", class: 'btn btn-primary' %></p>
      </div>
      <div class="row">
        <div class="list-content">
          <div id="install" class="list-pane">
            <h3>Section A</h3>
            <p>Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth.</p>
          </div>
          <div id="exercises" class="list-pane hidden">
            <h3>Section B</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
          </div>
          <div id="homework" class="list-pane hidden">
            <h3>Section C</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
          </div>
          <div id="projects" class="list-pane hidden">
            <h3>Section D</h3>
            <p>Vestibulum nec erat eu nulla rhoncus fringilla ut non neque. Vivamus nibh urna, ornare id gravida ut, mollis a magna. Aliquam porttitor condimentum nisi, eu viverra ipsum porta ut. Nam hendrerit bibendum turpis, sed molestie mi fermentum id. Aenean volutpat velit sem. Sed consequat ante in rutrum convallis. Nunc facilisis leo at faucibus adipiscing.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
      <div class="list-group" id="myList">
        <a href="#install" class="list-group-item active">Installation</a>
        <a href="#exercises" class="list-group-item">Excercises</a>
        <a href="#homework" class="list-group-item">HomeWork</a>
        <a href="#projects" class="list-group-item">Projects</a>
      </div>
    </div>
  </div>
</div>

现在应该看看我的javascript来管理目的了吗？我试图隐藏，点击事件和崩溃。可能还有更好的方法。

我正在使用ruby来处理javascript

<% content_for :head do %>
  <script type="text/javascript">

  </script>
<% end %>

然后添加代码来管理活动列表（也不起作用;（）

$(document).ready(function() {
  $(".list-group-item").live('click', function(){ 
    $('.active').removeClass('active');
    $(this).addClass('active');
    console.log($(this).html()); 
  });
});

请帮我纠正这个并编写内容显示/隐藏。

非常感谢!!

Answer 1

Hellow kiper 对于这种功能，最好使用ajax。请查看本教程，例如https://richonrails.com/articles/basic-ajax-in-ruby-on-rails

更改列表内容而不重新加载页面

1 个答案: