Как сделать div кликабельным, но не хотите, чтобы внутренние элементы выглядели как ссылки с Rails?

Question

Я работаю над функцией обмена сообщениями для моего проекта. Прямо сейчас я немного застрял в том, как сделать клик по div, чтобы пользователь мог перейти на вкладку беседы.

Вот мой код:

        <%= link_to conversation_messages_path(conversation) do %>
          <li>
            <div class="well row" id='conversation-well-row'>
              <div class="col-sm-2">
                <%= image_tag recipient.profile.avatar.url, class: 'conversation-index-avatar' %>
              </div>
              <div class="col-sm-10">
                <h4><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
                <h5 class="text-black-50">Last message preview</h5>
              </div>
            </div>
          </li>
        <% end %>     

Это делает мой <div class="well"> кликабельным, но также делает все остальное похожим на ссылку внутри этого div. Как сделать ссылку только из скважины?

Похоже, это .

Я хочу, чтобы имя, а также предварительный просмотр сообщения просматривались как текст, а также я хочу сделать аватар ссылкой на профиль.

Answer 1

Чтобы сделать ваш div кликабельным, просто добавьте clickable класс и удалите well класс из него:

ваш код будет выглядеть так:

<%= link_to conversation_messages_path(conversation) do %>
  <li>
    <div class="clickable row" id='conversation-well-row'>
      <div class="col-sm-2">
        <%= image_tag recipient.profile.avatar.url, class: 'conversation-index-avatar' %>
      </div>
      <div class="col-sm-10">
        <h4><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
        <h5 class="text-black-50">Last message preview</h5>
      </div>
    </div>
  </li>
<% end %>

Также добавьте CSS в ваш файл CSS как:

.clickable {
  cursor:pointer;
}

Answer 2

Если вы хотите, чтобы текст не был похож на ссылку, вам нужно применить CSS к тексту.

Для этого добавьте класс к тексту:

<h4 class="no-link-style"><%= recipient.profile.first_name %> <%= recipient.profile.last_name %></h4>
<h5 class="no-link-style text-black-50">Last message preview</h5>

И в своем CSS-файле добавьте CSS для этого класса:

.no-link-style {
    color: #000000 !important;
    text-decoration: none !important;

}

используйте код цвета по вашему выбору, # 000000 для черного цвета