페이지를 다시로드하지 않고 목록 내용을 변경하십시오.

Question

간단한 부트 스트랩 목록 그룹을 작성하여 페이지를 다시로드하지 않고 페이지의 내용을 변경하려고합니다.

** 나는 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> 

? 클릭 이벤트 및 접기에 숨어 ​​보았습니다. 아마 더 좋은 방법이 있습니다. 내가

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

여보세요 헤링본 무늬 이런 종류의 기능을 Ajax를 사용하는 것이 더 좋습니다. 이 자습서를 예로 확인하십시오. https://richonrails.com/articles/basic-ajax-in-ruby-on-rails