更改列表单击栏上的内容

Question

我有一个模态由：-左侧的步骤列表-右侧的内容框

我需要能够单击左侧的步骤，并且内容会在右侧更改，并带有相应的步骤描述。

用于在左侧显示步骤并在右侧显示内容的标记：

 <div class="uk-width-1-3">
   <ul class="pill-steps">
      <% @pill.steps.each_with_index do |step, index| %>
        <li class="pill-step"><span class="pill-number"><%= index + 1%></span><%= step.name %></li>
      <% end %>
   </ul>
 </div>
 <div class="uk-width-2-3 uk-padding-large pill-content">
   <% if @pill.steps.any? %>
    <% @pill.steps.each_with_index do |step, index| %>
       <div id="<%= @pill.id %>" class="pill">
         <h2><%= @pill.steps.first.name %></h2>
         <p><%= @pill.steps.first.desc %></p>
       </div>
    <% end %>
   <% end %>
 </div>

单击左侧步骤并在右侧显示内容的js：

  <script>
    $(".pill-step").click(function() {
      $(".pill-content").html("<h2><%= step.name %></h2><p><%= step.desc %></p>");
    });
  </script>

我不知道将JS放在哪里或如何使其动态:(基本上，我希望用户单击左侧的步骤，并在右侧显示相应的step.description和step.title。

关于如何实现这一目标的任何想法？

谢谢！

Answer 1

[可能有几种方法可以解决，但是最简单的方法可能是首先给所有.pill一个类来隐藏它们，所以像.hidden { display: none; }之类的东西（也许不要将此类添加到第一个药丸中） ，如果您需要在加载时在内容框中添加内容）。

在用户要单击的元素上，您需要在要显示的内容框中创建对元素ID的引用。我喜欢将jQuery.data()用于此类操作，因此在clickable元素上，您将添加一个data属性并创建一个如下按钮：</button class="pill-button" data-pill-id="<%= @pill.id %>">。

然后使用jQuery点击代码，您将希望隐藏所有.pill元素，然后仅显示匹配的元素。因此，如下所示：

$('.pill-button').on('click', function() {
    $('.pill').addClass('hidden');
    $('#' + $(this).data('pillId')).removeClass('hidden');
});

希望给您一个不错的起点。