使用 JAVASCRIPT 单击菜单链接时添加活动类
Add class active when clicking menu link with JAVASCRIPT
HTML
<div id="top" class="shadow">
<ul class="gprc">
<li><a href="http://www.domain.com/">Home</a></li>
<li><a href="http://www.domain.com/link1/">Text1</a></li>
<li><a href="http://www.domain.com/link2/">Text2</a></li>
<li><a href="http://www.domain.com/link3/">Text3</a></li>
<li><a href="http://www.domain.com/link4">Text4</a></li>
</ul>
爪哇语
window.onload = setActive;
function setActive() {
aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for (i = 0; i < aObj.length; i++) {
if (document.location.href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
}
问题是菜单主页链接始终保持选中或活动状态,即使我单击其他链接,我想在加载页面时不选择它,并且在我单击的其他链接时保持未选中状态,我在特定的登录页面上保持选中状态。请只有Javascript没有JQUERY。
试试这个:
window.onload = setActive;
function setActive() {
var aObj = document.getElementById('top').getElementsByTagName('a');
var found = false;
for(var i=aObj.length-1; i>=1 && !found; i--) {
if(document.location.href.indexOf(aObj[i].href)>=0) {
aObj[i].className='active';
found = true;
}
}
//if you never want home selected remove the next
if(!found && document.location.href.replace(/'/$/, "") == aObj[0].href.replace(/'/$/, ""))
aObj[0].className = 'active';
}
通过这种方式,您可以从列表的末尾开始,当您发现巧合时,它会停止搜索活动链接。
希望对您有所帮助
function setActive() {
var top = document.getElementById('top'),
aObj = top.getElementsByTagName('a'),
href = document.location.href,
found = false;
for (var i = 0; i < aObj.length || !found; i++) {
if (href.indexOf(aObj[i].href) >= 0) {
aObj[i].className = 'active';
found = true;
}
}
if (!found) {
aObj[0].className = 'active';
}
//Listen for link clicks
function listener(e) {
if(e.target.tagName === "A") {
for (var i = 0; i<aObj.length; i++) {//remove previous class
aObj[i].className = "";
}
e.target.className = "active";
}
}
if(top.addEventListener) {
top.addEventListener(listener);
} else if(top.attachEvent) {
top.attachEvent(listener);
}
}
您将需要侦听点击事件,以便确定是否按下了其中一个链接。我将使用一些简单的委托来做到这一点
相关文章:
- 将js添加到wordpress中以突出显示css活动菜单
- 如何在非活动时间后添加随机输入
- 我正在使用php includes来构建一个多页面网站.使用jquery,我将如何添加一个类"活动的”;添加到
- Fullcalendar-我们可以将自定义数据添加到我们的活动Json数据中吗
- 如果X与Y的href=匹配,则添加class'活动'-jQuery
- 在广告词脚本中添加活动选择器
- 如何根据活动锚点自动将类添加到链接中
- 添加'活动'类添加到主选项卡列表中
- 将“活动”类添加到父元素和子元素
- 如何使用 JavaScript 代码在活动 li 上添加类
- 为什么我的代码无法添加活动
- 如何制作<李>在刷新页面后添加活动的css类
- 添加活动菜单类
- 在用户滚动时为链接中的导航添加活动状态
- AngularJS:为li添加活动效果和悬停效果
- 向当前标题添加活动标题类
- 如何为Wordpress中的链接添加活动css类
- 如何使用YUI asyncRequests追溯性地向代码库添加活动AJAX请求检测
- 添加活动状态锚
- 流星和完整的日历包:我可以'不要在我的日历中添加活动