Question

感谢本周早些时候提供的大量帮助，我能够在这个“动态”页面上真正找到我试图创建的地方。但现在我遇到了以下问题：

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

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

但如果人们还可以在城市列表（页面中间）看到这是他们点击的链接，那就太棒了。使用一些CSS，Hover很容易，但我似乎无法使链接变得活跃。

我用过这一行：

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

但这只是点亮它直到你刷新整个页面。我希望他们在点击其他商店后返回正常的黑色文本。

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

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

我找到了一个可能的jQuery解决方案，但我无法让它工作。所以，如果你能在请回复中发表一个例子，谢谢！此外，我正在尝试做所有纯粹的javascript。

Answer 1

如果您只想使用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我得到了带有“rood”类的span的obj

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

我相信它会正常工作。

此致

Answer 2

我终于找到了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 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;
}

Answer 4

我只需添加和删除其他课程.rood_active，而不是依靠.rood:active来坚持。由于您的链接中有相同的类名，因此您需要通过基类rood类名称循环它们，并将新的活动类添加到其中。

其他CSS类：

.rood_active {
    color: #f30089;
}

使用Javascript：

function selectActiveLink() {
    //get all your rood class elements; 'links' will be an array
    var links = document.getElementsByClassName('rood');
    for (var i = 0; i < links.length; i++) {
       var link = links[i];
       //reset all links to the base class 'rood'
       link.className = 'rood';
       link.addEventListener('click', function() {
           //this will add rood_active class (and change color) or only clicked span
           this.className = 'rood rood_active';
       });
    }
}

//then from within your other showDiv*() functions, call selectActiveLink()
function showDiv2() {

    //all the other showDiv* function stuff here

    selectActiveLink();
}

突出显示当前链接Javascript

4 个答案: