Question

我希望定位一张我目前在我的应用程序中运行的图像。应用程序。布局视图，因此它仅在“冒险/ index.html.erb＆＃39;视图显示。我尝试在css文件＆＃39; adventures.scss＆＃39;中使用代码#nav_img { display: none; }，但这不起作用，如果我在＆＃39; application.scss＆＃39;中写了这个。样式表，它将禁用每个页面的图像 - 我只希望它在＆＃39; adventure.index.html.erb＆＃39;上不可见。视图。非常感谢。

Application.html.erb文件：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>TFAA</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag 'application','http://yui.yahooapis.com/2.8.1/build/reset/reset-min.css' %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

    <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,600' rel='stylesheet' type='text/css'>
  </head>

  <body>
    <div class="container">

<!-- ================= nav bar ================= -->

      <nav class="nav_bar">

        <div class="nav_logo">
          <%= link_to image_tag("nav_logo.png", id: "nav_img"), root_path %>
        </div>

        <ul class="nav_links">
          <% if user_signed_in? %>
            <li>
              <%= button_to "Log out", destroy_user_session_path, id: 'button_log_out', class: 'button', method: :delete %>
            </li>
          <% else %>
            <li>
              <%= button_to "Log in", new_user_session_path, id: 'button_log_in', class: 'button', method: :get %>
            </li>

            <li>
              <%= button_to "Sign up", new_user_registration_path, id: 'button_sign_up', class: 'button', method: :get %>
            </li>
          <% end %>
        </ul>
      </nav>

<!-- ================= flash notices ================= -->

      <p class="notice"><%= notice %></p>
         <p class="alert"><%= alert %></p>

      <%= yield %>

    </div>
  </body>
</html>

＆＃13;

adventures / index.html.erb文件：

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Adventure</title>
  </head>
  <body>
    <div class="adventure_logo">
      <%= image_tag "nav_logo.png", id: 'main_logo' %>
    </div>
    <% @adventures.each do |adventure|%>
      <%= link_to "#{adventure.title}", adventure_path(adventure.id), class: 'adventure' %>
    <% end %>
  </body>
</html>

＆＃13;

 body {
   font-family: 'Source Sans Pro', sans-serif;
 }

 .container {
   margin: 2%;
   background-color: lightgrey;
 }

 // ============= nav bar ==============

 .nav_bar {
   border: 1px solid blue;
   height: 100px;
   width: 100%;
   display: flex;
   justify-content: space-between;
 }

 .nav_logo {
   border: 2px dashed orange;
 }

 #nav_img {
   width: 300px;
 }

 .nav_links {
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid lightgreen;
   width: 30%;
 }

 .button {
   margin: 5px;
   padding: 10px;
   border-radius: 13px;
   border: none;
   color: white;
   font-family: 'Indie Flower', cursive;
   font-weight: 200;
   text-decoration: none;
 }

 #button_log_in {
   background-color: #8b0407;
   width: 100px;
 }

 #button_sign_up {
   background-color: #333333;
   width: 100px;
 }

 // ============= forms ==============

 .sign_up_form {
   border: 1px solid green;
 }

 .sign_up_h2 {
   border: 1px solid pink;
 }

 .sign_in_link {
   border: 1px solid yellow;
 }

 .sign_up_link {
   border: 1px solid purple;
 }

 .forgot_password {
   border: 1px solid brown;
 }

 // ============= adventures ==============

 .adventure {
   border: 1px solid yellow;
 }

 .adventure_logo {
   margin: 0 auto;
   width: 70%;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px dashed orange;
 }

 #main_logo {
   max-width: 100%;
   height: auto;
   width: 70%;
 }

＆＃13;

adventures.scss文件：

＆＃13;

#nav_img {
  display: none;
}

＆＃13;

Answer 1

使用current_page?帮助

检查页面

<% unless current_page?(controller: 'adventures', action: 'index') %>
  <%= link_to image_tag("nav_logo.png", id: "nav_img"), root_path %>
<% end %>

Answer 2

试试这个，它会显示除adventures/index.html.erb页面

以外的图像

<% unless current_page?(controller: 'adventures', action: 'index')%>
   <div class="nav_logo">
     <%= link_to image_tag("nav_logo.png", id: "nav_img"), root_path %>
   </div>
<%end%>

如果您只想在adventures/index.html.erb页面上显示图片，则必须执行下面的代码

<% if current_page?(controller: 'adventures', action: 'index')%>
    <div class="nav_logo">
        <%= link_to image_tag("nav_logo.png", id: "nav_img"), root_path %>
    </div>
<%end%>

Rails html视图，定位一个元素并使其仅对一个视图不可见。

2 个答案: