我想知道是否有一种方法可以调用javascript函数:
function get_url(link) {
var url = window.location.href;
var params = url.split('/')[3]
return params == link ? 'active-menu' : ''
}
get_url('#about');
内部导轨视图链接如下:
<li class="nav-item">
<%= link_to "About", root_path(:anchor => 'about'), class: "nav-link #{javascript(get_url('#about'))}", :"data-id" => "about" %>
</li>
注意此部分:
class: "nav-link #{javascript(get_url('#about'))}"
有没有办法做到这一点?如果没有,是否有更好的方法呢?
您可以将该函数调用推迟到客户端脚本:
js-nav-link
document.addEventListener('DOMContentLoaded', function(){
Array.prototype.forEach.call(
document.querySelectorAll(".js-nav-link"),
function(e){
if(yourModifiedGetUrlFunction(e.dataset.id))
e.classList.add('active-menu');
}
)
});
尝试在此服务器端进行操作很愚蠢,因为URL的哈希段不是由浏览器发送的。但是,如果我正确地理解了您,并且只想向与哈希匹配的链接添加一个类,则可以使用以下方法进行操作:
document.addEventListener("DOMContentLoaded", function(){
if (window.location.hash) {
document.querySelectorAll('a.nav-link[href="#%"]'.replace('%', window.location.hash))
.forEach(function(link){
link.classList.add('active');
});
}
});