Javascript 如何创建用作过滤器的段落

我想知道如何使这段代码更加简单和简短。 我有三个HTML段落用作过滤器。 它们的ID分别为“全部”、“肯定”和“否定”。 他们指的是审查。 在它们下面是三个div，其中包含实际的评论。 它们还携带分别名为“allcont”、“poscont”和“negcont”的ID。 这里的想法是，当我点击“全部”段落时，只有“allcont”div应该显示，而没有“postcont”和“negcont”。 “肯定”段落和“否定”段落也是如此

这样，我将创建三个显示不同评论的过滤器按钮

代码如下：

var allcont = document.getElementById("allcont");
var poscont = document.getElementById("poscont");
var negcont = document.getElementById("negcont");
var all = document.getElementById("all");
var positive = document.getElementById("positive");
var negative = document.getElementById("negative");
all.onclick = function(){
    allcont.style.display = "block";
    poscont.style.display = "none";
    negcont.style.display = "none";
    all.style.color = "red";
    positive.style.color = "white";
    negative.style.color = "white";
}
positive.onclick = function(){
    poscont.style.display = "block";
    allcont.style.display = "none";
    negcont.style.display = "none";
    positive.style.color = "red";
    all.style.color = "white";
    negative.style.color = "white";  
}
negative.onclick = function(){
    negcont.style.display = "block";
    poscont.style.display = "none";
    allcont.style.display = "none";
    negative.style.color = "red";
    all.style.color = "white";
    positive.style.color = "white";
}

当点击任何段落时，它应该将颜色更改为红色，正如我在上面的代码中所写的那样

这是可行的，但看起来非常难看和复杂，我相信使用for循环或类似的东西可以更容易地完成

---

提前感谢您的建议

我讨厌推荐jQuery，但是有了jQuery，它会变得更简单

$（函数（）{
$（“.pfilter”）。在（“单击”，函数（）{
var$this=$（this）；
$（“.cont”）.hide（）；
$（“#”+$this.data（“show”）.show（）；
$（“.pfilter”）.css（“颜色”、“蓝色”）；
$this.css（“颜色”、“红色”）；
});
});
p{
光标：指针；
显示：内联块；
利润率：0.10px；
颜色：蓝色；
}
分区控制{
显示：无；
}

所有
阳性
负

全部控制分区
邮政通讯部
NEGCONT DIV
提供了一个工作代码示例，而不仅仅是一个脚本片段，这是一个很好的解决方案。我建议的唯一更改是将样式从onclick处理程序移到css类中：
$（this.addClass（'selected'）$（“#”+$this.data（'show'））.addClass（'selected'）
。