jquery - 没有类 ="current"的导航

标签 jquery html css menuitem menubar

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

我显然可以在相应的按钮上使用诸如 class="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/

最佳答案

这是我使用的模式。

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

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

然后在您的 CSS 中,使用该类来确定“事件”状态。

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

关于jquery - 没有类 ="current"的导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20027090/

相关文章:

html - 使用 Twitter Bootstrap 响应式设计将列标题制作成字段标签

javascript - 使用 jquery 是否可以在 div 中查找和替换字符串?

javascript - 我如何使用简单模式来动态确认弹出窗口

javascript - CSS Transition 不适用于 FireFox 和 IE

javascript - 尝试使用 VideoJS、VideoJS-YouTube、VideoJS-Playlist 和 VideoJS-Playlist-UI

html - &lt;input autocomplete ='on'> 不适用于 Chrome。这是一个错误吗?

css - 如何从 Blogger 购物模板中删除页脚文本

javascript - 如何更改文本框值的颜色?

jquery - jQuery 对话框上的 Google Blockly UI 不可编辑

python - 在 Pyramid 中,如何从 View 中返回原始 HTML?