html - 如何根据调用内容的页面更改 HAML 中的 css 元素?

标签 html css ruby-on-rails haml

就 Ruby 和 Rails 而言,我还是个婴儿,仍然需要学习一切,但我今天确实有一件小事需要帮助。

我正在处理一个使用 HAML 的网站的 header ,我需要更改 <div> 的类名基于使用它的页面。

问题是:

如果是welcome.html.haml,我需要header.html.haml中的一个div是:

.navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}

对于所有其他页面,我需要 header.html.haml 中的相同 div 为:

.navbar.navbar-inverse.navbar-static-top{:role => "navigation"}

我希望使用类似的东西:

    - if <PAGE IS> == 'welcome.html.haml'

    .navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}

    - else

    .navbar.navbar-inverse.navbar-static-top{:role => "navigation"}

我只是不确定我能给它什么条件。我需要有关 <PAGE IS> 的帮助部分。

或者,如果有更简单的解决方案,我会洗耳恭听。

编辑:

这是我尝试过的方法,但到处都是错误:

- if controller.action_name == 'welcome'
.navbar.navbar-inverse.navbar-fixed-top{:role => "navigation"}
  .container
- else
.navbar.navbar-inverse.navbar-static-top{:role => "navigation"}
  .container

另一个编辑:

最佳答案

您可以使用参数获取当前 Controller 和操作:

if params[:controller] == 'home' && params[:action] == 'welcome'
   ...
end

编辑:

另一种解决方案是将参数传递给您的 header 。在你的 welcome.html.haml

= render 'header', navbar: :static

在“_header.html.haml”中:

<div class="navbar navbar-inverse navbar-<%= local_assigns[:navbar] || 'fixed' %>-top" role="navigation">

另一个更新:

当然,除非您在布局中渲染页眉,否则它完全没有意义。

另一种方法可能是 content_for 方法。

#'welcome.html.haml'
content_for(:navbar_class) { 'fixed' }

#'_header.html.haml'
<div class="navbar navbar-inverse navbar-<%= content_for?(:navbar_class) ? yield :navbar_class : 'static' %>-top" role="navigation">

关于html - 如何根据调用内容的页面更改 HAML 中的 css 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21003921/

相关文章:

ruby-on-rails - 如何使用 ruby​​ on Rails 2.3.9 和 ruby​​ 1.8.7 从文件系统中删除文件

html - 定位第三级下拉菜单

html - 表单 CSS - 边距

mysql - Rails 查询 [types, ids] 列表中具有 has_many 关系

html - 如何移动 H1 使其与 DIV 的顶部内联

html - 放大时页面内容容器不会完全垂直拉伸(stretch)

ruby-on-rails - 删除静态页面 rails 的/高压页面

jquery - 如何正确将 Bootstrap 列类设置为等高

php - phpDesigner IDE 7.0 版中的 HTML 代码格式

css - float div两列布局空白