Javascript 如何使一个元素在单击其他元素时保持活动状态？

我正在使用以下代码：

$（'.tab1-c'）.show（）；
$（'.one'）。单击（函数（）{
“严格使用”；
$（'.tab1-c'）.show（）；
$（'.tab2-c'）.hide（）；
$（'.tab3-c'）.hide（）；
$（'.tab4-c'）.hide（）；
});
$（'.two'）。单击（函数（）{
“严格使用”；
$（'.tab1-c'）.hide（）；
$（'.tab2-c'）.show（）；
$（'.tab3-c'）.hide（）；
$（'.tab4-c'）.hide（）；
});
$（'.three'）。单击（函数（）{
“严格使用”；
$（'.tab1-c'）.hide（）；
$（'.tab2-c'）.hide（）；
$（'.tab3-c'）.show（）；
$（'.tab4-c'）.hide（）；
});
$（'.four'）。单击（函数（）{
“严格使用”；
$（'.tab1-c'）.hide（）；
$（'.tab2-c'）.hide（）；
$（'.tab3-c'）.hide（）；
$（'.tab4-c'）.show（）；
});
.tab导航包装器{
最大宽度：自动；
保证金：0自动；
字体系列：开放式SAN；
文本转换：大写；
字母间距：2px；
字体大小：粗体；
}
.选项卡内容包装器{
背景色：#fff；
宽度：自动；
最小高度：自动；
填充：15px 35px 5px；
保证金：0自动；
文本对齐：对齐；
}
.tab1-c、.tab2-c、.tab3-c、.tab4-c{显示：无
}
.tab导航包装器ul li{
文本对齐：居中；
显示：内联块；
宽度：25%；
保证金：0；
文字装饰：无；
颜色：#000；
}
.选项卡导航包装器a{
显示：内联块；
宽度：25%；
填充：.75rem；
保证金：0；
文字装饰：无；
颜色：#000；
}
.字体内容{
字体系列：droid衬线；
字体大小：15px；
线高：20px；
颜色：#000000！重要；
文本缩进：50px；
}
.二{
}
.2：悬停~hr{
左缘：24.5%；
背景：#d48344；
}
.三{
}
.3：悬停~hr{
左边缘：49%；
背景#706a87；
}
.4{
}
.4：悬停~hr{
左缘：74%；
背景：#47435f；
}
人力资源{
高度：.25雷姆；
宽度：25%；
保证金：0；
背景#d4bba7；
边界：无；
转换：.3s易进易出；
}
h4{
字体大小：30px；
字体系列：谷歌；
字体大小：粗体；
边缘底部：15px；
边缘顶部：20px；
线高：35px；
字体颜色：#000！重要；
文本对齐：居中；
}


故事1故事2
故事3
故事4


这可以通过使用一些额外的CSS和jQuery实现（我添加了
\oneActive
，
\twoActive
…）。此外，我对jQuery进行了一些清理，并重写了大部分内容，以使其能够活跃地工作


$（'.tab1-c'）.show（）；
映射={
“一”：“表1-c”，
“二”：“表2-c”，
“三”：“表3-c”，
“四”：“表4-c”
};
$（'.1、.2、.3、.4'）。单击（函数（）{
$（'..+映射[$（this.attr（“类”）]））
.show（）
.兄弟姐妹（）
.hide（）；
$（本）
.attr（'id'，$（此）.attr（“类”）+“活动”）
.兄弟姐妹（）
.attr（“id”和“）；
});
.tab导航包装器{
最大宽度：自动；
保证金：0自动；
字体系列：开放式SAN；
文本转换：大写；
字母间距：2px；
字体大小：粗体；
}
.选项卡内容包装器{
背景色：#fff；
宽度：自动；
最小高度：自动；
填充：15px 35px 5px；
保证金：0自动；
文本对齐：对齐；
}
.tab1-c、.tab2-c、.tab3-c、.tab4-c{显示：无
}
.tab导航包装器ul li{
文本对齐：居中；
显示：内联块；
宽度：25%；
保证金：0；
文字装饰：无；
颜色：#000；
}
.选项卡导航包装器a{
显示：内联块；
宽度：25%；
填充：.75rem；
保证金：0；
文字装饰：无；
颜色：#000；
}
.字体内容{
字体系列：droid衬线；
字体大小：15px；
线高：20px；
颜色：#000000！重要；
文本缩进：50px；
}
.二{
}
.2：悬停~hr，#2活动~hr{
左缘：24.5%；
背景：#d48344；
}
.三{
}
.3：悬停~hr，#三个活动~hr{
左边缘：49%；
背景#706a87；
}
.4{
}
.4：悬停~hr，#四个活动~hr{
左缘：74%；
背景：#47435f；
}
人力资源{
高度：.25雷姆；
宽度：25%；
保证金：0；
背景#d4bba7；
边界：无；
转换：.3s易进易出；
}
h4{
字体大小：30px；
字体系列：谷歌；
字体大小：粗体；
边缘底部：15px；
边缘顶部：20px；
线高：35px；
字体颜色：#000！重要；
文本对齐：居中；
}


故事1故事2
故事3
故事4


测试1
测试2
测试3
测试4
只需要使用
使用严格的
就可以了，谢谢！！我还有一个问题，我正在尝试将此代码插入Weebly.com，但它们正在运行其他代码，因此代码无法正常工作。悬停部分工作，但活动部分不工作。它仍然徘徊回到开始。我必须指定一个精确的变量吗？？我对jQuery不太熟悉，因此非常感谢您的帮助！您可以将它的一部分恢复为旧代码。如果不想使用变量名映射，只需更改它。更有可能的是，weebly有一些与之相冲突的风格设计，而我真的没有办法解决这个问题（即使考虑到网站）。如果您愿意，如果您可以标记为solution，它会很有帮助。它几分钟前就开始工作了，我想我只是需要等待它更新Jquery。再次感谢你是一个英雄！