Javascript 尝试获取要显示和隐藏的项目失败

我有不同的数据集，当有人点击按钮查看他们想要查看的信息时，我想显示这些数据集。这其中的一部分现在正在工作，我希望在页面加载时显示第一块信息。但是，每当我单击其他按钮时，信息容器就会消失，它不会显示任何内容。我的控制台中没有显示任何错误，也看不出我做错了什么

有人看到我忽略的东西吗

$（文档）.ready（函数（）{
$（'.big three names'）。单击（函数（）{
var i=$（this.html（）；
$（'.big three info'）.css（“显示”、“无”）
$（'big three info'）.eq（i-1）.css（“显示”、“块”）；
});
$（'big three info'）.eq（0）.css（“显示”、“块”）；
});
。三巨头出局{
背景色：#CCC；
宽度：100%；
保证金：自动0；
/*填充：15px0*/
}
.三巨头{
利润率：75px 7.5%25px 7.5%；
高度：900px；
边框：1px纯黑；
}
#三巨头{
文本对齐：居中；
字号：1.6em；
填充：50px 0 30px 0；
}
#三大描述{
文本对齐：居中；
字体大小：1.3em；
}
#三巨头出局了{
宽度：100%；
高度：75px；
利润率：50px0；
}
.三巨头{
显示：内联块；
边框：2倍实心#FFF；
宽度：33.05%；
身高：100%；
文本对齐：居中；
字号：1.5em；
字体大小：粗体；
背景色：#000；
颜色：#FFF；
光标：指针；
}
.三大名字：悬停{
背景颜色：蓝色；
颜色：#FFF；
}
.三巨头信息{
利润率：50像素20%；
边框：1px纯黑；
高度：550px；
显示：无；
}
#三大信息标题{
宽度：100%；
利润率：100px 0 25px 50px；
字体大小：1.2米；
}
#大三信息描述{
宽度：100%；
左边距：50像素；
字号：1em；
}
.表演{
显示：块；
}

三巨头
描述
A.
B
C
A.
FDFSAF
B
fdfafa
C
fdsfsdfaf
在隐藏/显示方法中，当您只需要索引时，您正在引用元素的HTML

像这样：


$（文档）.ready（函数（）{
$（'.big three names'）。单击（函数（）{
var i=$（this.index（）；
$（'.big three info'）.fadeOut（）/.css（“显示”、“无”）
$（'.big three info'）.eq（i）.fadeIn（）/.css（“显示”、“块”）；
});
$（'big three info'）.eq（0）.css（“显示”、“块”）；
});
。三巨头出局{
背景色：#CCC；
宽度：100%；
保证金：自动0；
/*填充：15px0*/
}
.三巨头{
利润率：75px 7.5%25px 7.5%；
高度：900px；
边框：1px纯黑；
}
#三巨头{
文本对齐：居中；
字号：1.6em；
填充：50px 0 30px 0；
}
#三大描述{
文本对齐：居中；
字体大小：1.3em；
}
#三巨头出局了{
宽度：100%；
高度：75px；
利润率：50px0；
}
.三巨头{
显示：内联块；
边框：2倍实心#FFF；
宽度：33.05%；
身高：100%；
文本对齐：居中；
字号：1.5em；
字体大小：粗体；
背景色：#000；
颜色：#FFF；
光标：指针；
}
.三大名字：悬停{
背景颜色：蓝色；
颜色：#FFF；
}
.三巨头信息{
利润率：50像素20%；
边框：1px纯黑；
高度：550px；
显示：无；
}
#三大信息标题{
宽度：100%；
利润率：100px 0 25px 50px；
字体大小：1.2米；
}
#大三信息描述{
宽度：100%；
左边距：50像素；
字号：1em；
}
.表演{
显示：块；
}

三巨头
描述
A.
B
C
A.
FDFSAF
B
fdfafa
C
fdsfsdfaf

检查上面的工作演示

$('.big-three-names').click(function() {


   $(".big-three-info").hide();
   $("."+$(this).attr("class").split(" ")[1]+"-sub").show();



    });


  $(document).ready(function(){

  $(".one-sub").show()


  })

尝试用
.index（）
替换
.html（）
，从
.eq（）
调用中删除
-1


$（文档）.ready（函数（）{
$（'.big three names'）。单击（函数（）{
var i=$（this.index（）；
$（'.big three info'）.css（“显示”、“无”）
.eq（i）.css（“显示”、“块”）；
});
$（'big three info'）.eq（0）.css（“显示”、“块”）；
});
。三巨头出局{
背景色：#CCC；
宽度：100%；
保证金：自动0；
/*填充：15px0*/
}
.三巨头{
利润率：75px 7.5%25px 7.5%；
高度：900px；
边框：1px纯黑；
}
#三巨头{
文本对齐：居中；
字号：1.6em；
填充：50px 0 30px 0；
}
#三大描述{
文本对齐：居中；
字体大小：1.3em；
}
#三巨头出局了{
宽度：100%；
高度：75px；
利润率：50px0；
}
.三巨头{
显示：内联块；
边框：2倍实心#FFF；
宽度：33.05%；
身高：100%；
文本对齐：居中；
字号：1.5em；
字体大小：粗体；
背景色：#000；
颜色：#FFF；
光标：指针；
}
.三大名字：悬停{
背景颜色：蓝色；
颜色：#FFF；
}
.三巨头信息{
利润率：50像素20%；
边框：1px纯黑；
高度：550px；
显示：无；
}
#三大信息标题{
宽度：100%；
利润率：100px 0 25px 50px；
字体大小：1.2米；
}
#大三信息描述{
宽度：100%；
左边距：50像素；
字号：1em；
}
.表演{
显示：块；
}

三巨头
描述
A.
B