Javascript 选项卡无法正常工作

我正在创建一个简单的应用程序，它有两个选项卡-

Bio

和

Timeline

，每个选项卡都有自己的内容。我想根据单击的内容显示/隐藏内容。我的HTML、CSS和JS文件如下所示- （）

$（文档）.ready（函数（）{
$（'.tablink'）。在（'click'，函数（e）上{
var currentAttrValue=$（this.attr（'href'）；
//显示/隐藏选项卡
$（'.dashfolio关于'+currentAttrValue）.show（）.sides（）.hide（）；
//将当前选项卡更改/删除为活动选项卡
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
e、 预防默认值（）；
});
});
。关于标题容器{
左边距：80px；
边缘顶部：10px；
字体大小：15px；
}
.about header container>a{
右边填充：10px；
}
#bio dashfolio{
边缘顶部：20px；
}
.tablink：活动{
颜色：红色；
}
.tabcontent{
显示：无；
}
.tabcontent.active{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。生命之相直径非多洛尔苏打水在梅特斯。在拉奥里特·厄罗斯·尼布（laoreet eros nibh）的作品中，亨德雷特·迪亚姆·法雷特拉（hendrerit diam pharetra）的作品。Morbi id nisi有效性，turpis非车辆，三尖杉。塞德塞德
前庭按摩。暂时性面屈侧前庭。我们的智者是一位杰出的领袖。生命之相直径非多洛尔苏打水在梅特斯。罗恩·拉奥里特·厄罗斯·尼布，但亨德雷特
直径在。Morbi id nisi有效性，turpis非车辆，三尖杉。前庭按摩。暂时性面屈侧前庭。我们的智者是一位杰出的领袖。Phasellus
维生素D非多洛尔苏打粉在metus中使用。在拉奥里特·厄罗斯·尼布（laoreet eros nibh）的作品中，亨德雷特·迪亚姆·法雷特拉（hendrerit diam pharetra）的作品。Morbi id nisi有效性，turpis非车辆，三尖杉。前庭按摩。暂时性面屈侧前庭。
我们的智者是一位杰出的领袖。生命之相直径非多洛

随机文本太棒了，你不觉得吗

您的问题在这一行：

$('.dashfolio-about' + currentAttrValue).show().siblings().hide();

改为：

$(currentAttrValue).show().siblings().hide();

片段：


$（文档）.ready（函数（）{
$（'.tablink'）。在（'click'，函数（e）上{
var currentAttrValue=$（this.attr（'href'）；
//显示/隐藏选项卡
$（currentAttrValue）.show（）.sides（）.hide（）；
//将当前选项卡更改/删除为活动选项卡
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
e、 预防默认值（）；
});
});
。关于标题容器{
左边距：80px；
边缘顶部：10px；
字体大小：15px；
}
.about header container>a{
右边填充：10px；
}
#bio dashfolio{
边缘顶部：20px；
}
.tablink：活动{
颜色：红色；
}
.tabcontent{
显示：无；
}
.tabcontent.active{
显示：块；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。生命之相直径非多洛尔苏打水在梅特斯。在拉奥里特·厄罗斯·尼布（laoreet eros nibh）的作品中，亨德雷特·迪亚姆·法雷特拉（hendrerit diam pharetra）的作品。Morbi id nisi有效性，turpis非车辆，三尖杉。前庭按摩。暂时性面屈侧前庭。我们的智者是一位杰出的领袖。生命之相直径非多洛尔苏打水在梅特斯。在拉奥里特·厄罗斯·尼布（laoreet eros nibh）的作品中，亨德雷特·迪亚姆·法雷特拉（hendrerit diam pharetra）的作品。Morbi id nisi有效性，turpis非车辆，三尖杉。前庭按摩。暂时性面屈侧前庭。我们的智者是一位杰出的领袖。生命之相直径非多洛尔苏打水在梅特斯。在拉奥里特·厄罗斯·尼布（laoreet eros nibh）的作品中，亨德雷特·迪亚姆·法雷特拉（hendrerit diam pharetra）的作品。Morbi id nisi有效性，turpis非车辆，三尖杉。前庭按摩。暂时性面屈侧前庭。我们的智者是一位杰出的领袖。生命之相直径非多洛

随机文本太棒了，你不觉得吗

您在javascript中的何处添加活动类？我想这似乎不见了……谢谢@gaetanoM，这很好用！虽然我理解你给出的解决方案为什么有效，但我的解决方案为什么无效？不
$（'.dashfolio关于'+currentAttrValue）.show（）.sides（）.hide（）
意味着它将在
.dashfolio about
div中查找选定属性值的子元素？@KeshavVasudevan抱歉，您需要添加一个空格：尝试以下操作：$（'.dashfolio about'+currentAttrValue）：这意味着：选择此元素（让类dashfolio about）然后选择子元素“#hhh”。如果不放空格，则表示：选择id=xxx、class=xxx的元素。这是你的错误。非常感谢。如果您还有其他问题，请告诉我。非常感谢您，它现在可以工作了！谢谢你的帮助！