Javascript 选项卡控件在ASP.net MVC中未按预期工作

我尝试实现选项卡控件。但是，当我运行页面时，第一个实例将在第一个选项卡本身中显示来自其他选项卡的所有字段。如果我单击第二个选项卡，然后返回到第一个选项卡，我将按预期工作

视图：

.标签{
高度：1475px；宽度：100%；文本对齐：左；}
.选项卡导航包装器{
宽度：100%；溢出-x：自动；位置：相对！重要；z索引：999！重要；顶部：3px；}
.tabs ul{
显示：块；溢出-y:隐藏；边距：0px；}
李先生{
显示：内联块；边框：1px纯灰色；边框底部：3px纯蓝色；背景色：白色；}
.tabs ul li.active{
边框：1px纯黑；边框底部：3px纯白；}
李先生{
文本装饰：无；颜色：蓝色；填充：10px；线宽：25px；位置：相对；字体重量：粗体；}
.选项卡内容包装器{
位置：相对！重要；z索引：1！重要；边框：3px纯蓝色；填充：20px；最小高度：40px；}
.选项卡内容{
显示：块；高度：700px；宽度：100%；}





内容1
内容2
内容3
$（文档）.ready（函数（）{
$（“.tab nav wrapper li”）。单击（函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
$（“.tab导航包装器li”）.removeClass（“活动”）；
$（此）.addClass（“活动”）；
var target=$（this.find（“a”）.attr（“href”）；
$（“.tab内容包装器”）.find（“.tab内容”）.hide（）；
$（“.tab内容包装”）.find（target.show（）；
})
});

下面是我得到的结果。如您所见，选项卡1中的最后一个字段是按钮。但是，我得到了标签2下面的连接和标签2后面的标签3内容。

当我单击选项卡2并返回到选项卡1时，它会按预期工作

谁能帮我一下吗？

换成

.tab-content {
   display: none;
   height: 700px;
   width: 100%; }

.tab-content + .tab-content{
   display: none;

它应该隐藏除第一个选项卡以外的所有选项卡。

---

您的脚本将激活必要的选项卡

谢谢。我能修好它。

.tab-content {
   display: none;
   height: 700px;
   width: 100%; }

.tab-content + .tab-content{
   display: none;