突出当前链接Javascript

Question

多亏了本周早些时候的大量帮助，我才能在这个“动态”页面上找到自己想要创建的东西。但现在我遇到了以下问题：

我正在制作一个页面，将存储信息显示到列表的一侧，并包含所有的商店。我能够用这一行制作动态内容：

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

但是，如果你还能在城市列表(页面中部)上看到这是他们点击的链接，那就太好了。悬停与一些CSS是容易的，但我似乎不能使链接某种类型的活动。

我用了这句话：

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

但这只会让它亮起来，直到刷新整个页面。我希望他们回到正常的黑色文本，一旦你点击一个不同的商店。

在这里您会发现我的当前代码(内容是荷兰语，但代码应该可读性很好)：http://jsfiddle.net/T2Hv8/3/

这将是最终的结果：http://i.stack.imgur.com/KPqyl.png (不允许直接发布图像)

我找到了一个可能的jQuery解决方案，但我无法让它工作。因此，如果您可以在您的答复中张贴一个例子，谢谢！而且，我正在尝试做所有纯javascript的事情。

Answer 1

我终于明白了OP想要什么，至少我认为：

看看小提琴：http://jsfiddle.net/T2Hv8/10/

这是在所有ShowDiv函数(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";

Answer 2

如果您只想对所描述的功能使用javascript，您可以这样做。

http://jsfiddle.net/T2Hv8/9/

我试着做一个完整的例子，但由于时间不多，我告诉你我到现在为止做了什么。

在每次单击函数上返回对象，即"this“

然后，在函数showDiv1上，我实现了一个用类rood解析所有元素并更改其背景色的循环。

function showDiv1(obj) {
var menus = document.getElementsByClassName("rood");
for (var i = menus.length - 1; i >= 0; i--)
    {
        //alert(menus[i].id);
        var elem = document.getElementById(menus[i].id);
        elem.style.backgroundColor = "transparent";
        elem.style.backgroundColor = "#E9EEBF";
    }
document.getElementById('store').innerHTML = 'Vestiging 1 is nu open';
obj.style.backgroundColor = "red";    
}

PS --目前只在showDiv1函数中，但也可以复制到其他两个函数中。

现在，为什么这个方法不能正常工作，我已经在点击时传递了锚的obj，而循环遍历类rood，我得到了span类的obj。

您需要做的是，将类和id添加到锚点，而不是span，然后运行相同的代码。

我相信这会很好的。

问候

Answer 3

ids = ['id1', 'id2']
elems = [];

for(var i=0, len=ids.length; i<len; i++){
    elems.push(document.getElementById(ids[i])); 
    /* depend on what browsers you want to support you might prefere e.g. getElementsByClassName over above solution */
}

var select_one = function(e){
    for(var i=0, len=elems.length; i<len; i++){
        elems[i].style.backgroundColor = "transparent";
    }
    this.style.backgroundColor = "red";
    /* changing classes would be better */
    return false;
}

for(var i=0, len=elems.length; i<len; i++){
    elems[i].onclick = select_one;
}