Question

这是我长期苦苦挣扎的事情，似乎并没有消失。我有一个包含图像的图库页面。对于页面的加载，尤其是图像的加载，我插入了一个预加载器图标，该图标旋转2000毫秒，直到其消失并重新出现该页面。页脚默认通过#myFooter设置为display: none;，并且在JS加载2秒后，样式再次更改为display: flex;。

但是，我有2个不同的页脚，其中一个用于图库页面，另一个用于其他页面。画廊页面的一个具有#myFooter ID，而另一个没有。这是因为如果没有此ID，您将看到页脚在页眉（navbar）下方浮动。

通过在RoR中使用I18n，我还用2种语言制作了整个网站。因此，消失的display: none; CSS仅在一种语言（英语）中发生，而在另一种语言（西班牙语）中则没有显示。因此，当我切换到英语时，页面会以某种方式加载仅用于其他页面而不是图库页面的页脚。切换到西班牙语时，确实会加载正确的页脚。

这是html：

没有ID #myFooter的脚：

<div class="footer">
</div>

标识为#myFooter的页脚：

<div id="myFooter" class="footer">
</div>

application.html.erb：

```

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ibiza Wedding Ceremonies</title>
    <%= csrf_meta_tags %>
    <%= action_cable_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all' %>
    <%#= stylesheet_pack_tag 'application', media: 'all' %> <!-- Uncomment if you import CSS in app/javascript/packs/application.js -->
  </head>
  <body onload="myFunction()" style="margin:0;">
    <% if current_page?(root_path) %>
      <%= render 'shared/banner' %>
      <%= render 'shared/navbar' %>
      <%= render 'shared/topbtn' %>
    <% elsif current_page?(pages_about_path) %>
      <%= render 'shared/navbar-2' %>
    <% else %>
      <%= render 'shared/navbar-2' %>
      <%= render 'shared/topbtn' %>
    <% end %>

    <%= render 'shared/flashes' %>
    <%= yield %>
    <% if current_page?(gallery_index_path) %>
      <%= render 'shared/footer-2' %>
    <% else %>
      <%= render 'shared/footer' %>
    <% end %>
    <%= javascript_include_tag 'application' %>
    <%= javascript_pack_tag 'application' %>
  </body>
</html>

这是CSS：

_footer.scss：

#myFooter {
  display: none;
}

.footer {
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  padding: 0px 50px;
  color: rgba(0,0,0,0.3);
  bottom: 0px;
  width: 100%;
}
.footer-links {
  display: flex;
  align-items: center;
}
.footer-links a {
  color: black;
  opacity: 0.15;
  text-decoration: none;
  font-size: 24px;
  padding: 0px 10px;
}
.footer-links a:hover {
  opacity: 1;
}
.footer .fa-heart {
  color: #D23333;
}

_loader.scss：

/* Center the loader */

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 }
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom {
  from{ bottom:-100px; opacity:0 }
  to{ bottom:0; opacity:1 }
}

#myDiv {
  display: none;
  text-align: center;
}

这是JavaScript：

pre-loader.js：

var myVar;

function myFunction() {
  myVar = setTimeout(showPage, 2000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
  document.getElementById("myFooter").style.display = "flex";
}

routes.rb：

Rails.application.routes.draw do
  ActiveAdmin.routes(self)
  devise_for :users

  get '/change_locale/:locale', to: 'settings#change_locale', as: :change_locale
  get '/:locale' => 'pages#home'

  root to: 'pages#home'

  scope '(:locale)', locale: /en|es/ do
    root to: 'pages#home'
    get 'pages/contact'
    get 'pages/weddings'
    get 'pages/about'
    get 'pages/press'
    get 'pages/other_ceremonies'
    get 'pages/press/ibiza-si-quiero', to: 'pages#si_quiero', as: :si_quiero
    get 'pages/press/celebrating-love', to: 'pages#celebrating_love', as: :celebrating_love
    # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
    resources :testimonials
    resources :photos, only: [:index], as: :gallery
  end
end

所以我的问题是：如何使浮动页脚在英语和西班牙语页面上都消失？

I18n RoR中带有切换语言的浮动页脚

0 个答案: