Rails html视图，定位一个元素并使其仅对一个视图不可见。
[英]Rails html view, target one element and make it invisible for one view only.
问题描述
I am looking to target a image which I currently have in my 'application.html.erb' layout view, so it only displays when the 'adventures/index.html.erb' view is displayed. 
我希望在我的'application.html.erb'布局视图中定位我当前拥有的图像，因此它仅在显示'adventures / index.html.erb'视图时显示。 I tried using the code #nav_img { display: none; } 我尝试使用代码#nav_img { display: none; } #nav_img { display: none; } in the css file 'adventures.scss', however this does not work and if I wrote this in the 'application.scss' stylesheet, it would disable the image for every page - I only want it to be invisible on the 'adventure.index.html.erb' view. #nav_img { display: none; }在CSS文件“adventures.scss”，然而，这并不工作，如果我写了这个在“application.scss”的样式表，它会禁用图像的每一页-我只希望它是对“看不见的冒险.index.html.erb'视图。 Many thanks. 非常感谢。
Application.html.erb file: Application.html.erb文件：
<!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>
adventures/index.html.erb file: adventures / index.html.erb文件：
<!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>
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%; }
adventures.scss file: adventures.scss文件：
#nav_img { display: none; }
2 个解决方案
解决方案1
0 2016-07-27 13:22:39
Check for the page using current_page? 使用current_page?检查页面current_page? helper 帮手
<% unless current_page?(controller: 'adventures', action: 'index') %>
<%= link_to image_tag("nav_logo.png", id: "nav_img"), root_path %>
<% end %>
解决方案2
0 2016-07-27 13:26:54
Try this, it will display image except adventures/index.html.erb page 试试这个，它将显示除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%>
if you want to display image only on adventures/index.html.erb page, then you have to do below code 如果您只想在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%>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.