Javascript 如何突出显示选定的<；李>；只有一件吗？

我正在努力学习网页设计，当我试图通过java脚本将类添加到网页中时遇到了麻烦

html代码：

<ul>
    <li onclick="switchChannel(channel1)>
        #Channel1
    </li>
    <li onclick="switchChannel(channel2) class="selected">
        #Channel2
    </li>
    <li onclick="switchChannel(channel3)>
        #Channel3
    </li>

javascript:script.js

function switchChannel(channelName) {
    }

javascript:channel.js

    var channel1={
        name:"Channel1",
        createdOn:new Date("April 1, 2016"),
        starred:false
};

     var channel2={
            name:"Channel1",
            createdOn:new Date("April 1, 2016"),
            starred:false
    };

我希望能够从列表中单击一个通道1并将其应用。选定的类将应用于该通道，但当单击通道2时，将其删除。从通道1中选择并将其应用于通道2，依此类推

---

如果我弄乱了代码中的任何其他内容，请随时发表评论。

此解决方案使用jQuery，但我认为这可能会对您有所帮助。可以看到一个代码笔，它显示了一个正在运行的版本

---

此解决方案使用jQuery，但我认为这可能会对您有所帮助。可以看到一个代码笔，它显示了一个正在运行的版本

---

您应该使用

getElementsById

和

getElementsbyTagName

来操作DOM：

功能选择频道（频道编号）{
让listItems=document.getElementById（“items”）.getElementsByTagName（“li”）；
var length=listItems.length；
对于（变量i=0；i

。已选定{
颜色：蓝色；
左边框：4倍纯蓝色；
}

#频道1
#channel2
#频道3

您应该使用

getElementsById

和

getElementsbyTagName

来操作DOM：

功能选择频道（频道编号）{
让listItems=document.getElementById（“items”）.getElementsByTagName（“li”）；
var length=listItems.length；
对于（变量i=0；i

。已选定{
颜色：蓝色；
左边框：4倍纯蓝色；
}

#频道1
#channel2
#频道3

这里有很多答案，但它们似乎没有解决实际问题。下面是一个使用vanilla JavaScript实现您的要求的快速示例

功能开关通道（el）{
//找到频道列表中的所有元素，并在其上循环
Array.prototype.slice.call（document.queryselectoral（'ul[data tag=“channelList”]li'））.forEach（函数（元素）{
//删除选定的类
element.classList.remove（'selected'）；
});
//将所选类添加到单击的元素中
el.classList.add（'selected'）；
}

。已选定{
颜色：蓝色；
左边框：4倍纯蓝色；
}

频道1
频道2
频道3

这里有很多答案，但它们似乎没有解决实际问题。下面是一个使用vanilla JavaScript实现您的要求的快速示例

功能开关通道（el）{
//找到频道列表中的所有元素，并在其上循环
Array.prototype.slice.call（document.queryselectoral（'ul[data tag=“channelList”]li'））.forEach（函数（元素）{
//删除选定的类
element.classList.remove（'selected'）；
});
//将所选类添加到单击的元素中
el.classList.add（'selected'）；
}

。已选定{
颜色：蓝色；
左边框：4倍纯蓝色；
}

频道1
频道2
频道3

我解决了它。我非常感谢你们的帮助

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');

---

我解决了。我非常感谢你们的帮助

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');

---

为什么script.js是空的？@Sv443这是你应该为他写的部分；）为什么您缺少

“

？我使用click事件的

事件.target

来获取被单击的

项。因此，如果保存每次单击的元素，则可以在使用刚才高亮显示的新目标覆盖该变量之前，从该元素中删除该类。PS：你的第二个频道的名字也是Channel1，所以你有重复的名字。为什么script.js是空的？@Sv443这是你应该为他写的部分；）为什么您缺少

“

？我使用click事件的

事件.target

来获取被单击的

项。因此，如果保存每次单击的元素，则可以在使用刚才高亮显示的新目标覆盖该变量之前，从该元素中删除该类。PS：您的第二个频道的名称也是Channel1，因此您有重复的名称。虽然这确实解决了这个问题，但没有提到jQuery，因此它可能不可用。另外，

event.preventDefault（）

可能不适用于此处，并导致不希望的副作用。我将此留给用户，让他们知道这是否对他们有利，我的目标是可能帮助他们找到解决方案，如果不是的话，至少为他们指出实现it的正确方向@Adamh非常感谢您的帮助，但是您可能想在评论中与OP核实一下jQuery是否可用我正在使用jQuery，很抱歉在开始时没有提到它，我尝试了这个方法，但所选的类从未被添加到新选择的通道中。虽然这确实解决了这个问题，但没有提到jQuery，所以它可能不可用。另外，

event.preventDefault（）

可能不适用于此处，并导致不希望出现的副作用。我想让用户知道这是否对他们有利，我的目标是可能帮助他们找到解决方案，如果不是，至少将他们指向正确的方向

$('li').removeClass('selected');
$('li:contains(' + channelName.name + ')').addClass('selected');