如何使 div 可点击，但不希望内部元素看起来像 Rails 的链接？答案

【问题标题】：How to make a div clickable, but don't want inside elements to look like links with Rails?如何使 div 可点击，但不希望内部元素看起来像 Rails 的链接？
【发布时间】：2019-04-18 09:08:01
【问题描述】：

我正在为我的项目开发消息传递功能。现在，我对如何使 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 内的链接。我如何只从井中建立链接？

看起来像this。

我希望将名称和消息预览作为文本进行预览，并且我希望使头像成为个人资料的链接。

【问题讨论】：

你究竟想做什么，请详细说明
您是否希望文本看起来不像链接，或者您是否希望它甚至不用作链接？这是两个不同的东西。
我不希望文本看起来像一个链接，我希望图片可以作为一个不同的链接。

标签： html ruby-on-rails hyperlink

【解决方案1】：

如果您希望文本看起来不像链接，则需要对文本应用 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 代表黑色

【讨论】：

【解决方案2】：

为了使您的 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;
}

【讨论】：

这只会显示一个光标，就像链接可点击一样，但名称和消息预览的文字装饰仍然像链接一样。