Question

我怀疑这必须是一种常见的做法，但我似乎无法搜索正确的短语。我正在寻找创建一个基本的html / css导航菜单，该菜单可以从其他按钮中唯一地设置当前页面按钮的样式。

我显然可以在相应的按钮上使用类=“current”这样的类。但是，我希望只使用一个可以动态加载到每个页面（最好是客户端）的代码片段，以便将来轻松编辑。这有一个共同的解决方案吗？

谢谢！

更新：示例代码

Current Route:
http://www.example.com/homer.html


HTML

<body class=""> (class added with Javascript)

<ul>
<a href="homer.html"><li>Homer</li></a>
<a href="marge.html"><li>Marge</li></a>
<a href="bart.html"><li>Bart</li></a>
</ul>

</body>

http://jsfiddle.net/daniel_studiolynch/9U6sS/

Answer 1

这是我使用的模式。

在页面加载时在body标签上设置一个类。使用当前路由（哈希或其他）。

// www.yoursite.com/#somehash
document.body.className = window.location.hash.slice(1); //somehash

然后在你的css中，使用该类来确定“活动”状态。

.somehash .nav-btn.somehash{...}

Answer 2

我不确定我是否同意这种方法，但这是因为我的其他答案并没有完全明白。

// Grab Current URL
var thispage = window.location.href;

// Find where A.href == Window.href
var thisnav = $("a[href='" + thispage + "']");

// This doesnt need to add a class if you dont want to. 
// This is simply showing you how to identify the <a> tag that contains the current URL
thisnav.addClass("green");

这里是小提琴：http://jsfiddle.net/4Vff9/

无类导航=“当前”

2 个答案: