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

init.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，则最好使用帮助程序将辅助方法更改为以下内容：

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

然后回到布局：

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

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

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

1 个答案: