Javascript 在排行榜中单击姓名时显示详细信息（可能在弹出窗口中）
我这里有一个排行榜，有四个javascript选项卡，当我单击这些选项卡时，它们会显示四个不同的排行榜。 请运行以下代码段：Javascript 在排行榜中单击姓名时显示详细信息（可能在弹出窗口中）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我这里有一个排行榜，有四个javascript选项卡，当我单击这些选项卡时，它们会显示四个不同的排行榜。 请运行以下代码段： $（文档）.ready（函数（）{ $（'tab a'）。在（'click'，函数（e）上{ e、 预防默认值（）； var_this=$（this）； var block=_this.attr（'href'）； $（“.tab”）.removeClass（“活动”）； _this.parent（）.addClass（“活动”）； $（“.leadboardconten
$（文档）.ready（函数（）{
$（'tab a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
var_this=$（this）；
var block=_this.attr（'href'）；
$（“.tab”）.removeClass（“活动”）；
_this.parent（）.addClass（“活动”）；
$（“.leadboardcontent”）.hide（）；
$（block.fadeIn（）；
});
});
*，
*：之前，
*：之后{
框大小：边框框；
}
html{
溢出y：滚动；
}
身体{
背景：#c1bdba；
字体系列：“titilliumweb”，无衬线；
}
a{
文字装饰：无；
颜色：#1ab188；
-webkit过渡：.5s轻松；
过渡：放松；
}
a:悬停{
颜色：#179b77；
}
.表格{
背景：rgba（19,35,47,0.9）；
填充：10px；
最大宽度：305px；
利润率：40px自动；
边界半径：20px；
盒影：0 4px 10px 4px rgba（19,35,47,0.3）；
垫底：1px；
}
.选项卡组{
列表样式：无；
填充：0；
保证金：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”，无衬线；
}
/*--------------------
排行榜
--------------------*/
.排行榜{
-webkit转换：翻译（0%，0%）；
转换：翻译（0%，0%）；
宽度：285px；
背景：-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指数：2；
排名：0；
左：0；
宽度：100%；
身高：100%；
填充：18px 10px 18px 50px；
保证金：0；
背景：无；
颜色：#fff；
}
.排行榜ol li mark：：之前，
.排行榜ol li mark:：之后{
内容：''；
位置：绝对位置；
z指数：1；
底部：-11px；
左：-9px；
边框顶部：10px实心#c24448；
左边框：10px实心透明；
-webkit转换：所有.1易于输入输出；
过渡：所有.1都易于输入输出；
不透明度：0；
}
.排行榜ol li mark:：之后{
左：自动；
右：-9px；
左边界：无；
右边框：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；
底部：自动；
边界顶部：无；
边框底部：6px实心#a63d3d；
}
.排行榜ol li:第n个孩子（6）{
背景：#cd4b4b；
}
排行榜ol li:第n个孩子（6）：：之后{
背景：#cd4b4b；
盒影：0-1px
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#weeklylb">Weekly LB</a>
</li>
<li class="tab"><a href="#overalllb">Overall LB</a>
</li>
<li class="tab"><a href="#defaulters">Defaulters</a>
</li>
<li class="tab"><a href="#co-workers">Co-Workers</a>
</li>
</ul>
<div class="tab-content">
<div id="weeklylb" class="leadboardcontent">
<div class="leaderboard" id="leaderboard">
<ol>
<li data-toggle="modal" data-target="#myModal">
<mark>Weekly LB</mark>
<small>315</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Brandon Barnes</mark>
<small>301</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Raymond Knight</mark>
<small>292</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Trevor McCormick</mark>
<small>245</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Andrew Fox</mark>
<small>203</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Andrew Fox</mark>
<small>203</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Trevor McCormick</mark>
<small>245</small>
</li>
<li data-toggle="modal" data-target="#myModal">
<mark>Andrew Fox</mark>
<small>203</small>
</li>
</ol>
</div>
<svg style="display: none;">
<symbol id="cup" x="0px" y="0px" width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve">
<path fill="#F26856" d="M21.215,1.428c-0.744,0-1.438,0.213-2.024,0.579V0.865c0-0.478-0.394-0.865-0.88-0.865H6.69
C6.204,0,5.81,0.387,5.81,0.865v1.142C5.224,1.641,4.53,1.428,3.785,1.428C1.698,1.428,0,3.097,0,5.148
C0,7.2,1.698,8.869,3.785,8.869h1.453c0.315,0,0.572,0.252,0.572,0.562c0,0.311-0.257,0.563-0.572,0.563
c-0.486,0-0.88,0.388-0.88,0.865c0,0.478,0.395,0.865,0.88,0.865c0.421,0,0.816-0.111,1.158-0.303
c0.318,0.865,0.761,1.647,1.318,2.31c0.686,0.814,1.515,1.425,2.433,1.808c-0.04,0.487-0.154,1.349-0.481,2.191
c-0.591,1.519-1.564,2.257-2.975,2.257H5.238c-0.486,0-0.88,0.388-0.88,0.865v4.283c0,0.478,0.395,0.865,0.88,0.865h14.525
c0.485,0,0.88-0.388,0.88-0.865v-4.283c0-0.478-0.395-0.865-0.88-0.865h-1.452c-1.411,0-2.385-0.738-2.975-2.257
c-0.328-0.843-0.441-1.704-0.482-2.191c0.918-0.383,1.748-0.993,2.434-1.808c0.557-0.663,1-1.445,1.318-2.31
c0.342,0.192,0.736,0.303,1.157,0.303c0.486,0,0.88-0.387,0.88-0.865c0-0.478-0.394-0.865-0.88-0.865
c-0.315,0-0.572-0.252-0.572-0.563c0-0.31,0.257-0.562,0.572-0.562h1.452C23.303,8.869,25,7.2,25,5.148
C25,3.097,23.303,1.428,21.215,1.428z M5.238,7.138H3.785c-1.116,0-2.024-0.893-2.024-1.99c0-1.097,0.908-1.99,2.024-1.99
c1.117,0,2.025,0.893,2.025,1.99v2.06C5.627,7.163,5.435,7.138,5.238,7.138z M18.883,21.717v2.553H6.118v-2.553H18.883
L18.883,21.717z M13.673,18.301c0.248,0.65,0.566,1.214,0.947,1.686h-4.24c0.381-0.472,0.699-1.035,0.947-1.686
c0.33-0.865,0.479-1.723,0.545-2.327c0.207,0.021,0.416,0.033,0.627,0.033c0.211,0,0.42-0.013,0.627-0.033
C13.195,16.578,13.344,17.436,13.673,18.301z M12.5,14.276c-2.856,0-4.93-2.638-4.93-6.273V1.73h9.859v6.273
C17.43,11.638,15.357,14.276,12.5,14.276z M21.215,7.138h-1.452c-0.197,0-0.39,0.024-0.572,0.07v-2.06
c0-1.097,0.908-1.99,2.024-1.99c1.117,0,2.025,0.893,2.025,1.99C23.241,6.246,22.333,7.138,21.215,7.138z" />
</symbol>
</svg>
</div>
<div id="overalllb" class="leadboardcontent" style="display:none">
<div class="leaderboard">
<ol>
<li>
<mark>Overall LB</mark>
<small>3115</small>
</li>
<li>
<mark>Brandon Barnes1</mark>
<small>3101</small>
</li>
<li>
<mark>Raymond Knight1</mark>
<small>2192</small>
</li>
<li>
<mark>Trevor McCormick1</mark>
<small>2145</small>
</li>
<li>
<mark>Andrew Fox1</mark>
<small>2103</small>
</li>
<li>
<mark>And1rew Fox1</mark>
<small>2103</small>
</li>
<li>
<mark>Tre1vor McCormick1</mark>
<small>2145</small>
</li>
<li>
<mark>Andrew Fox1</mark>
<small>2103</small>
</li>
</ol>
</div>
</div>
<!-- login tab end defaulters -->
<div id="defaulters" class="leadboardcontent" style="display:none">
<div class="leaderboard">
<ol>
<li>
<mark>Defaulters</mark>
<small>3115</small>
</li>
<li>
<mark>Brandon Barnes2</mark>
<small>31012</small>
</li>
<li>
<mark>Raymond Knight2</mark>
<small>21922</small>
</li>
<li>
<mark>Trevor McCormick2</mark>
<small>21452</small>
</li>
<li>
<mark>Andrew Fox2</mark>
<small>21032</small>
</li>
<li>
<mark>And1rew Fox2</mark>
<small>21032</small>
</li>
<li>
<mark>Tre1vor McCormick2</mark>
<small>21452</small>
</li>
<li>
<mark>Andrew Fox2</mark>
<small>21032</small>
</li>
</ol>
</div>
</div>
<!-- login tab end co-workers -->
<div id="co-workers" class="leadboardcontent" style="display:none">
<div class="leaderboard">
<ol>
<li>
<mark>co-workers</mark>
<small>3115</small>
</li>
<li>
<mark>Brandon Barnes2</mark>
<small>31012</small>
</li>
<li>
<mark>Raymond Knight2</mark>
<small>21922</small>
</li>
<li>
<mark>Trevor McCormick2</mark>
<small>21452</small>
</li>
<li>
<mark>Andrew Fox2</mark>
<small>21032</small>
</li>
<li>
<mark>And1rew Fox2</mark>
<small>21032</small>
</li>
<li>
<mark>Tre1vor McCormick2</mark>
<small>21452</small>
</li>
<li>
<mark>Andrew Fox2</mark>
<small>21032</small>
</li>
</ol>
</div>
</div>
</div>
<!-- tab-content -->
</div>
<!-- Popup -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Oliver Fulco</h4>
</div>
<div class="modal-body">
<p><strong>Email Address:</strong> ofulco@fakeemail.com</p>
<p><strong>IM:</strong> ofulco</p>
<p><strong>Member Since:</strong> 09/20/2014</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /form -->
<script src=https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
$(document).ready(function() {
$('.tab a').on('click', function(e) {
e.preventDefault();
var _this = $(this);
var block = _this.attr('href');
$(".tab").removeClass("active");
_this.parent().addClass("active");
$(".leadboardcontent").hide();
$(block).fadeIn();
});
});
*,
*:before,
*:after {
box-sizing: border-box;
}
html {
overflow-y: scroll;
}
body {
background: #c1bdba;
font-family: 'Titillium Web', sans-serif;
}
a {
text-decoration: none;
color: #1ab188;
-webkit-transition: .5s ease;
transition: .5s ease;
}
a:hover {
color: #179b77;
}
.form {
background: rgba(19, 35, 47, 0.9);
padding: 10px;
max-width: 305px;
margin: 40px auto;
border-radius: 20px;
box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3);
padding-bottom: 1px;
}
.tab-group {
list-style: none;
padding: 0;
margin: 0;
}
.tab-group:after {
content: "";
display: table;
clear: both;
}
.tab-group li a {
display: block;
text-decoration: none;
color: #a0b3b0;
font-size: 20px;
float: left;
width: 50%;
text-align: center;
cursor: pointer;
transition: .5s ease;
border-radius: 5px;
}
.tab-group li a:hover {
background: #ff8566;
color: #ffffff;
}
.tab-group .active a {
background: #ff5c33;
color: #ffffff;
}
.tab-content > div:last-child {
display: none;
}
/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
min-height: 650px;
height: 200px;
margin: 0;
background: -webkit-radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
color: #fff;
font-family: 'Open Sans', sans-serif;
}
/*--------------------
Leaderboard
--------------------*/
.leaderboard {
-webkit-transform: translate(0%, 0%);
transform: translate(0%, 0%);
width: 285px;
background: -webkit-linear-gradient(top, #3a404d, #181c26);
background: linear-gradient(to bottom, #3a404d, #181c26);
border-radius: 10px;
box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
}
.leaderboard h1 {
font-size: 18px;
color: #e1e1e1;
padding: 12px 13px 18px;
}
.leaderboard h1 svg {
width: 25px;
height: 26px;
position: relative;
top: 3px;
margin-right: 6px;
vertical-align: baseline;
}
.leaderboard ol {
counter-reset: leaderboard;
padding: 0px !important;
}
.leaderboard ol li {
position: relative;
z-index: 1;
font-size: 14px;
counter-increment: leaderboard;
padding: 18px 10px 18px 50px;
cursor: pointer;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);
transform: translateZ(0) scale(1, 1);
list-style: none;
}
.leaderboard ol li::before {
content: counter(leaderboard);
position: absolute;
z-index: 2;
top: 15px;
left: 15px;
width: 20px;
height: 20px;
line-height: 20px;
color: #c24448;
background: #fff;
border-radius: 20px;
text-align: center;
}
.leaderboard ol li mark {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 18px 10px 18px 50px;
margin: 0;
background: none;
color: #fff;
}
.leaderboard ol li mark::before,
.leaderboard ol li mark::after {
content: '';
position: absolute;
z-index: 1;
bottom: -11px;
left: -9px;
border-top: 10px solid #c24448;
border-left: 10px solid transparent;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
opacity: 0;
}
.leaderboard ol li mark::after {
left: auto;
right: -9px;
border-left: none;
border-right: 10px solid transparent;
}
.leaderboard ol li small {
position: relative;
z-index: 2;
display: block;
text-align: right;
}
.leaderboard ol li::after {
content: '';
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fa6855;
box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
opacity: 0;
}
.leaderboard ol li:nth-child(1) {
background: #fa6855;
border-radius: 10px 10px 0 0;
}
.leaderboard ol li:nth-child(1)::after {
background: #fa6855;
border-radius: 10px 10px 0 0;
}
.leaderboard ol li:nth-child(2) {
background: #e0574f;
}
.leaderboard ol li:nth-child(2)::after {
background: #e0574f;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}
.leaderboard ol li:nth-child(2) mark::before,
.leaderboard ol li:nth-child(2) mark::after {
border-top: 6px solid #ba4741;
bottom: -7px;
}
.leaderboard ol li:nth-child(3) {
background: #d7514d;
}
.leaderboard ol li:nth-child(3)::after {
background: #d7514d;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11);
}
.leaderboard ol li:nth-child(3) mark::before,
.leaderboard ol li:nth-child(3) mark::after {
border-top: 2px solid #b0433f;
bottom: -3px;
}
.leaderboard ol li:nth-child(4) {
background: #cd4b4b;
}
.leaderboard ol li:nth-child(4)::after {
background: #cd4b4b;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(4) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
top: -7px;
bottom: auto;
border-top: none;
border-bottom: 6px solid #a63d3d;
}
.leaderboard ol li:nth-child(5) {
background: #cd4b4b;
}
.leaderboard ol li:nth-child(5)::after {
background: #cd4b4b;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(5) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
top: -7px;
bottom: auto;
border-top: none;
border-bottom: 6px solid #a63d3d;
}
.leaderboard ol li:nth-child(6) {
background: #cd4b4b;
}
.leaderboard ol li:nth-child(6)::after {
background: #cd4b4b;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(6) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
top: -7px;
bottom: auto;
border-top: none;
border-bottom: 6px solid #a63d3d;
}
.leaderboard ol li:nth-child(7) {
background: #cd4b4b;
}
.leaderboard ol li:nth-child(7)::after {
background: #cd4b4b;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.leaderboard ol li:nth-child(7) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
top: -7px;
bottom: auto;
border-top: none;
border-bottom: 6px solid #a63d3d;
}
.leaderboard ol li:nth-child(8) {
background: #c24448;
border-radius: 0 0 10px 10px;
}
.leaderboard ol li:nth-child(8)::after {
background: #c24448;
box-shadow: 0 -2.5px 0 rgba(0, 0, 0, 0.12);
border-radius: 0 0 10px 10px;
}
.leaderboard ol li:nth-child(8) mark::before,
.leaderboard ol li:nth-child(8) mark::after {
top: -9px;
bottom: auto;
border-top: none;
border-bottom: 8px solid #993639;
}
.leaderboard ol li:hover {
z-index: 2;
overflow: visible;
}
.leaderboard ol li:hover::after {
opacity: 1;
-webkit-transform: scaleX(1.06) scaleY(1.03);
transform: scaleX(1.06) scaleY(1.03);
}
.leaderboard ol li:hover mark::before,
.leaderboard ol li:hover mark::after {
opacity: 1;
-webkit-transition: all .35s ease-in-out;
transition: all .35s ease-in-out;
}