使用javascript选项卡显示排行榜

我有两个标签“总体磅”和“每周磅”。磅表示排行榜

单击“总体”将显示具有特定分数的排行榜

问题:

当我单击“每周LB”选项卡时，我想显示一个具有相同样式的LeaderBard，即使用相同的css。两个排行榜都有不同的数据，如下面的HTML所示

请帮忙

$（文档）.ready（函数（）{
$（'tab a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var_this=$（this）；
var block=_this.attr（'href'）；
如果（块=“#排行榜”）{
$（block.fadeIn（）；
$（'#login'）.hide（）；
$（文档）.find（'.active'）.removeClass（“active”）；
$（this.parent（）.addClass（“活动”）；
}
if（block==“#登录”）{
$（block.fadeIn（）；
$（“#排行榜”）.hide（）；
$（文档）.find（'.active'）.removeClass（“active”）；
$（this.parent（）.addClass（“活动”）；
}
});
$（'.tab.active a'）。单击（）；//默认打开
});
*，
*：之前，
*：之后{
框大小：边框框；
}
html{
溢出y：滚动；
}
a{
文字装饰：无；
颜色：#1ab188；
-webkit过渡：.5s轻松；
过渡：放松；
}
a:悬停{
颜色：#179b77；
}
.表格{
背景：rgba（19,35,47,0.9）；
填充：10px；
最大宽度：330px；
利润率：40px自动；
边界半径：20px；
垫底：1px；
}
.选项卡组{
列表样式：无；
填充：0；
保证金：自动；
}
.选项卡组：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.选项卡组LIA{
显示：块；
文字装饰：无；
颜色：#a0b3b0；
字体大小：20px；
浮动：左；
宽度：50%；
文本对齐：居中；
光标：指针；
过渡：放松；
边界半径：5px；
}
.选项卡组li a：悬停{
背景:#ff8566；
颜色：#ffffff；
}
.选项卡组.活动a{
背景#ff5c33；
颜色：#ffffff；
}
.tab内容>分区：最后一个子项{
显示：无；
}
/*--------------------
身体
--------------------*/
身体{
最小高度：650px；
高度：200px；
保证金：0；
背景：-webkit径向梯度（中心顶部的椭圆最远角，#f39264 0%，#f2606f 100%）；
背景：径向梯度（中心顶部的椭圆最远角，#f39264 0%，#f2606f 100%）；
颜色：#fff；
字体系列：“开放式Sans”，无衬线；
填充10px；
}
/*--------------------
排行榜
--------------------*/
.排行榜{
-webkit转换：翻译（0%，0%）；
转换：翻译（0%，0%）；
宽度：312px；
背景：-webkit线性梯度（顶部，#3a404d，#181c26）；
背景：线性梯度（至底部，#3a404d，#181c26）；
边界半径：10px；
盒影：0 7px 30px rgba（62,9,11,0.3）；
显示：无；
}
.排行榜h1{
字号：18px；
颜色：#e1e1；
填充：12px 13px 18px；
}
.排行榜h1 svg{
宽度：25px；
高度：26px；
位置：相对位置；
顶部：3px；
右边距：6px；
垂直对齐：基线；
}
.排行榜ol{
计数器重置：排行榜；
填充：0px！重要；
}
.排行榜ol li{
位置：相对位置；
z指数：1；
字体大小：14px；
反增量：排行榜；
填充：18px 10px 18px 50px；
光标：指针；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-webkit变换：translateZ（0）尺度（1,1）；
变换：translateZ（0）比例（1,1）；
列表样式：无；
}
.排行榜ol li：：之前{
内容：柜台（排行榜）；
位置：绝对位置；
z指数：2；
顶部：15px；
左：15px；
宽度：20px；
高度：20px；
线高：20px；
颜色：#c24448；
背景：#fff；
边界半径：20px；
文本对齐：居中；
}
.排行榜ol li mark{
位置：绝对位置；
z指数：5；
排名：0；
左：0；
宽度：350%；
身高：100%；
填充：18px 10px 18px 50px；
保证金：0；
背景：无；
颜色：#fff；
}
.排行榜ol li mark：：之前，
.排行榜ol li mark:：之后{
位置：相对位置；
z指数：1；
左：9px；
边框顶部：10px实心#c24448；
-webkit转换：所有.1易于输入输出；
过渡：所有.1都易于输入输出；
不透明度：0；
}
.排行榜ol li mark:：之后{
左：自动；
左边界：无；
右边框：10px实心透明；
}
.排行榜ol li small{
位置：相对位置；
z指数：2；
显示：块；
文本对齐：右对齐；
溢出：隐藏；
}
.排行榜ol li：：之后{
内容：''；
位置：绝对位置；
z指数：1；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景#fa6855；
盒影：0 3px 0 rgba（0,0,0,0.08）；
-webkit过渡：所有.3s易于输入输出；
过渡：所有.3s易于输入输出；
不透明度：0；
}
.排行榜ol li:第n个孩子（1）{
背景#fa6855；
边界半径：10px 10px 0；
}
排行榜ol li:第n个孩子（1）：：之后{
背景#fa6855；
边界半径：10px 10px 0；
}
.排行榜ol li:第n个孩子（2）{
背景：#e0574f；
}
排行榜ol li:第n个孩子（2）：：之后{
背景：#e0574f；
盒影：02px0rgba（0,0,0,0.08）；
}
.排行榜ol li:第n个孩子（2）马克：：之前，
.排行榜ol li:第n个孩子（2）分：：之后{
边框顶部：6px实心#ba4741；
底部：-7px；
}
.排行榜ol li:第n个孩子（3）{
背景#d7514d；
}
排行榜ol li:第n个孩子（3）：：之后{
背景#d7514d；
盒影：0 1px 0 rgba（0,0,0,0.11）；
}
.排行榜ol li:第n个孩子（3）马克：：之前，
.排行榜ol li:第n个孩子（3）分：：之后{
边框顶部：2个实心#b0433f；
底部：-3px；
}
.排行榜ol li:第n个孩子（4）{
背景：#cd4b4b；
}
排行榜ol li:第n个孩子（4）：：之后{
背景：#cd4b4b；
盒影：0-1px0RGBA（0,0,0,0.15）；
}
排行榜ol li:第n个孩子（4）分：：之前，
.排行榜ol li:第n个孩子（4）分：：之后{
顶部：-7px；
底部：自动；
边界顶部：无；
边框底部：6px实心#a63d3d；
}
.排行榜ol li:第n个孩子（5）{
背景：#cd4b4b；
}
排行榜ol li:第n个孩子（5）：：之后{
背景：#cd4b4b；
盒影：0-1px0RGBA（0,0,0,0.15）；
}
.排行榜ol li:第n个孩子（5）分：：之前，
.排行榜ol li:第n个孩子（4）分：：之后{
顶部：-7px；
底部：