css - 如何在当前页面上使用 Sinatra 突出显示导航菜单？

Question

我无法调用 css 来指示当前页面，该页面将允许在单击页面时显示颜色选项卡。我知道“current-menu-item”类有效，因为当你这样做时:

<li id="menu-item" class="current-menu-item">
 <a href="/about-us">About Us</a>
</li>

您可以看到与任务关联的属性。我不知道还能尝试什么，我正在寻找关于我可能做错了什么的见解。

这是我的main.rb文件

require 'bundler/setup'
require 'rubygems'
require 'sinatra'
require 'sinatra/activerecord'
require 'sinatra/flash'
require 'sinatra/reloader' if development?
require './config/environments'
require 'pathname'
require 'uri'


require './routes/init'
require  './helpers/init'
require  './models/init'

get '/' do
 erb :"index.html"
end

get '/about-us' do
 erb :"about_us.html"
end

get '/services' do
 erb :"services.html"  
end

get '/sign-up' do
 erb :"sign_up.html"
end

初始化.rb

require_relative 'user.rb'

helper1.rb

helpers do

  def active_page?(path='')
    request.path_info =='/'+path ? 'active_page': nil
  end
end

layout.erb

            <div class="menu-main-menu-container">
              <ul id="menu-main-menu" class="menu">
                <li id="menu-item" class="menu-item">
                  <a href="/">Home</a>
                   </li>
                <li id="menu-item" class="menu-item">
                <a href="/services">Services</a>
                </li>
                <li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page?  %>" >
                 <a href="/about-us"> About Us </a>
                </li>
                 <li id="menu-item" class="menu-item "><a href="/sign-up">Sign Up</a></li>

            </ul>
          </div>

Answer 1

两件事，第一:

如果条件为真，你想显示字符串“current-menu-item”而不是对象 current-menu-item，所以你想移动引号

改变:

<li id="menu-item" class="<%= current-menu-item if '/about-us' == active_page?  %>" >

到:

<li id="menu-item" class=<%= "current-menu-item" if '/about-us' == active_page? %>>

第二个:

没有正确使用条件和辅助方法

如果它返回 true 或 false，那么 helper 将被最好地使用将辅助方法更改为以下内容:

def active_page?(path='')
  request.path_info == '/' + path
end

然后回到布局:

<li id="menu-item" class=<%= "current-menu-item" if active_page?("about-us") %>>

从逻辑上讲，这将完成您想要做的事情。