在不重新加載頁面的情況下更改列表內容

Question

我試圖完成一個簡單的引導程序列表組以更改頁面上的內容而不重新加載頁面。

**我與紅寶石編碼on Rails和使用Javascript/jQuery的

我的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來管理的目的何在？ 我試圖隱藏，點擊事件和崩潰。 也許還有更好的辦法。

我使用紅寶石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