高亮当前链接Javascript [英] Highlight current link Javascript

问题描述

由于本周早些时候提供了很多帮助，我能够真正地在这个动态页面上尝试创建。但现在我遇到以下问题：

Thanks to a lot of help earlier this week, I was able to really get somewhere on this 'dynamic' page im trying to create. But now I'm running into the following problem:

我做一个页面，显示商店信息到列表的所有商店的一侧。我可以使用这行代码创建动态内容：

I'm making a page that displays store info to the side of a list with all the stores. I was able to make dynamic content with this line:

document.getElementById('store').innerHTML = 'dynamic content';

但这将是巨大的，如果一个人也可以看到城市列表这是他们点击的链接。

But it would be great if one could also see on the list of cities (middle of the page) that this is the link they clicked. Hover is easy with some CSS, but I can't seem to make the links some sort of active.

我使用这一行：

document.getElementById('rood').style.backgroundColor = "red";

但这只是点亮，直到你刷新整个页面。

But this simply lights it up until you refresh the entire page. I want them to go back to normal black text once you click on a different store.

这里你会找到我当前的代码（内容是荷兰语，但代码应该是可读性很好）：
http://jsfiddle.net/T2Hv8/3/

Here you will find my current code (content is in Dutch, but code should be readable just fine): http://jsfiddle.net/T2Hv8/3/

这将是最终结果：
http://i.stack.imgur.com/KPqyl.png （不允许直接张贴图片）

And this will be the end result: http://i.stack.imgur.com/KPqyl.png (not allowed to post images directly)

我发现了一个可能的jQuery解决方案，但我不能得到它的工作。所以如果你可以在你的回复中发表一个例子，谢谢！

I found a possible jQuery solution, but I can't get it to work. So if you could please post an example in your responses, thank you! Also, I'm trying to do everything pure javascript.

推荐答案

我终于找出了OP想要什么，至少我认为：

I have finally figured out what OP wants, at least I think:

检查它：fiddle： http：// jsfiddle .net / T2Hv8 / 10 /

Check it out fiddle:http://jsfiddle.net/T2Hv8/10/

这是您必须在所有ShowDiv函数中添加的内容（ShowDiv1，ShowDiv2，Showdiv3）

This is what you have to add in all ShowDiv function's (ShowDiv1, ShowDiv2, Showdiv3)

var spanID = obj.parentNode.id;
var newNode = document.getElementById(spanID);

var menus = document.getElementsByClassName("rood");
for (var i = menus.length - 1; i >= 0; i--)
    {   
        var elem = document.getElementById(menus[i].id);
        elem.style.backgroundColor = "transparent";
        elem.style.backgroundColor = "#ffffff";
    }

newNode.style.backgroundColor = "red";

这篇关于高亮当前链接Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！