使用javascript标签显示排行榜 [英] display leaderboard using javascript tabs
本文介绍了使用javascript标签显示排行榜的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有两个标签整体LB和每周LB.Lb表示排行榜。
点击整体显示具有特定分数的排行榜。 >
问题：
我想显示一个相同风格的leaderbaord，即使用相同的css，当我点击weekly LB标签。每张排行榜都有不同的数据，如下面的HTML中所示。
请帮助。
$（document）.ready（function（）{$（'。tab a'）。on ）{e.preventDefault（）; var _this = $（this）; var block = _this.attr（'href'）; if（block ==#leaderboard）{$（block）.fadeIn（）; $ '#login'）。hide（）; $（document）.find（'。active'）。removeClass（active）; $（this）.parent（）。addClass（active）;} if ==#login）{$（block）.fadeIn（）; $（'＃leaderboard'）。hide（）; $（document）.find（'。active'）。removeClass（active）; $（this）.parent（）。addClass（active）; }}）; $（'。tab.active a'）。click（）; // Default open}）;
*，*：before ，*：after {box-sizing：border-box;} html {overflow-y：scroll;} a {text-decoration：none;颜色：＃1ab188; -webkit过渡：.5s缓解; transition：.5s ease;} a：hover {color：＃179b77;} form {background：rgba（19，35，47，0.9）; padding：10px; max-width：330px; margin：40px auto; border-radius：20px; padding-bottom：1px;}。tab-group {list-style：none; padding：0; margin：auto;}。tab-group：after {content：; display：table; clear：both;}。tab-group li a {display：block; text-decoration：none;颜色：＃a0b3b0; font-size：20px; float：left; width：50％; text-align：center; cursor：pointer;过渡：.5s轻松; 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 ---------------- ---- * / body {min-height：650px; height：200px; margin：0;背景：-webkit-radial-gradient（中心顶部的椭圆最远角，＃f39264 0％，＃f2606f 100％）;背景：径向梯度（中心顶部的椭圆最远角，＃f39264 0％，＃f2606f 100％）; color：#fff; font-family：'Open Sans'，sans-serif; padding 10px;} / * --------------------排行榜-------------------- * /。 leaderboard {-webkit-transform：translate（0％，0％）; transform：translate（0％，0％）; width：312px;背景：-webkit-linear-gradient（top，＃3a404d，＃181c26）;背景：线性梯度（至底部，＃3a404d，＃181c26）; border-radius：10px; box-shadow：0 7px 30px rgba（62，9，11，0.3）; display：none;}。leaderboard h1 {font-size：18px;颜色：＃e1e1e1; padding：12px 13px 18px;}。leaderboard h1 svg {width：25px; height：26px;位置：相对; 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;颜色：＃c24448; background：#fff; border-radius：20px; text-align：center;}。leaderboard ol li mark {position：absolute; z指数：5; top：0; left：0;宽度：350％;高度：100％; padding：18px 10px 18px 50px; margin：0;背景：无; color：#fff;}。leaderboard ol li mark :: before，.leaderboard ol li mark :: after {position：relative; z-index：1; left：9px; border-top：10px solid＃c24448; -webkit-transition：all .1s ease-in-out; transition：all .1s ease-in-out; opacity：0;}。leaderboard ol li mark :: after {left：auto; border-left：none; border-right：10px solid transparent;}。leaderboard ol li small {position：relative; z-index：2;显示：block; text-align：right; overflow：hidden;}。leaderboard ol li :: after {content：''; position：absolute; z-index：1; top：0; left：0; width：100％;高度：100％;背景：＃fa6855; box-shadow：0 3px 0 rgba（0，0，0，0.08）; -webkit-transition：所有.3s缓入;过渡：所有.3s缓入; 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 {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 {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后{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后{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后{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后{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;}
<！DOCTYPE html>< html>< head> < meta charset =UTF-8> < title>注册/登录表单< / title> < link href ='http：//fonts.googleapis.com/css？family = Titillium + Web：400,300,600'rel ='stylesheet'type ='text / css'> < link rel =stylesheethref =css / normalize.css> < link rel =stylesheethref =css / style.css>< / head>< body> < div class =form> < ul class =tab-group> < li class =tab active>< a href =＃leaderboard> Overall LB< / a> < / li> < li class =tab>< a href =＃login>每周LB< / a> < / li> < / ul> < div class =tab-content> < div id =signup> < div class =leaderboardid =leaderboard> < ol> < li> < mark> Jerry Wood< / mark> < small> 315< / small> < / li> < li> < mark> Brandon Barnes< / mark> < small> 301< / small> < / li> < li> < mark> Raymond Knight< / mark> < small> 292< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 245< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 245< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < / ol> < / div> < svg style =display：none;> < symbol id =cupx =0pxy =0pxwidth =25pxheight =26pxviewBox =0 0 25 26enable-background =new 0 0 25 26xml：space =preserve> < path fill =＃F26856d =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.191 c0.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.301 c0.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.273 V1.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 =login> < h1>< / h1>< < form action =/method =post> < div class =leaderboardid =leaderboard> < ol> < li> < mark> Jerry Wood< / mark> < small> 45< / small> < / li> < li> < mark> Brandon Barnes< / mark> < small> 30< / small> < / li> < li> < mark> Raymond Knight< / mark> < small> 29< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 24< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 20< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 20< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 19< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 18< / small> < / li> < / ol> < / div> < / form> < / div> < / div> <！ - tab-content - > < / div> <！ - / form - > < script src ='http：//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>< / script> < script src =js / index.js>< / script>< / body>< / html>
pIc：
小提琴链接： https://jsfiddle.net/Zedhmem/ju0xr8of/1/
解决方案请检查以下来源。
$（document）.ready（function（）{$（'。标签a'）。on（'click'，function（e）{e.preventDefault（）; var _this = $（this）; var block = _this.attr（'href'）; $（ removeClass（active）; _this.parent（）。addClass（active）; if（block ==#signup）{$（block）.fadeIn（）; $（'＃login'）。hide ）;} if（block ==#login）{$（block）.fadeIn（）; $（'＃signup'）。hide（）;}}）;}）;/ pre>*，*：before，*：after {box-sizing：border-box; } html {overflow-y：scroll; } body {background：＃c1bdba; font-family：'Titillium Web'，sans-serif; } a {text-decoration：none;颜色：＃1ab188; -webkit过渡：.5s缓解;过渡：.5s缓解; } a：hover {color：＃179b77; } .form {background：rgba（19，35，47，0.9）; padding：40px; max-width：600px; margin：40px auto; border-radius：4px; box-shadow：0 4px 10px 4px rgba（19，35，47，0.3）; } .tab-group {list-style：none; padding：0; margin：0 0 40px 0; } .tab-group：after {content：; display：table;清除： } .tab-group li a {display：block; text-decoration：none; padding：15px;背景：rgba（160，179，176，0.25）;颜色：＃a0b3b0; font-size：20px; float：left; width：50％; text-align：center; cursor：pointer; -webkit过渡：.5s缓解;过渡：.5s缓解; } .tab-group li a：hover {background：＃179b77; color：#ffffff; } .tab-group .active a {background：＃1ab188; color：#ffffff; } .tab-content> div：last-child {display：none; } /* - - - - - - - - - - 身体 - - - - - - - - - - */ *， *： ：before，* :: after {box-sizing：border-box; } body {min-height：450px;高度：100vh; margin：0;背景：-webkit-radial-gradient（中心顶部的椭圆最远角，＃f39264 0％，＃f2606f 100％）;背景：径向梯度（中心顶部的椭圆最远角，＃f39264 0％，＃f2606f 100％）; color：#fff; font-family：'Open Sans'，sans-serif; } / * --------------------排行榜-------------------- * / .leaderboard { - webkit-transform：translate（0％，0％）; transform：translate（0％，0％）; width：285px; height：308px;背景：-webkit-linear-gradient（top，＃3a404d，＃181c26）;背景：线性梯度（至底部，＃3a404d，＃181c26）; border-radius：10px; box-shadow：0 7px 30px rgba（62，9，11，0.3）; } .leaderboard h1 {font-size：18px;颜色：＃e1e1e1; padding：12px 13px 18px; } .leaderboard h1 svg {width：25px; height：26px;位置：相对; top：3px; margin-right：6px; vertical-align：baseline; } .leaderboard ol {counter-reset：leaderboard; } .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）; } .leaderboard ol li :: before {content：counter（leaderboard）; position：absolute; z-index：2; top：15px; left：15px; width：20px; height：20px; line-height：20px;颜色：＃c24448; background：#fff; border-radius：20px; text-align：center; } .leaderboard ol li mark {position：absolute; z-index：2; top：0; left：0; width：100％;高度：100％; padding：18px 10px 18px 50px; margin：0;背景：无; 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;不透明度：0; } .leaderboard ol li mark :: after {left：auto; right：-9px; border-left：none; border-right：10px solid透明; } .leaderboard ol li small {position：relative; z-index：2;显示：block; text-align：right; } .leaderboard ol li :: after {content：''; position：absolute; z-index：1; top：0; left：0; width：100％;高度：100％;背景：＃fa6855; box-shadow：0 3px 0 rgba（0，0，0，0.08）; -webkit-transition：所有.3s缓入;过渡：所有.3s缓入;不透明度：0; } .leaderboard ol li：nth-child（1）{background：＃fa6855; } .leaderboard ol li：nth-child（1）:: after {background：＃fa6855; } .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（5）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 :: before {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;过渡：全部.35s缓入; }
< script src =https：// ajax .googleapis.com / ajax / libs / jquery /2.1.1/jquery.min.js>< / script> < div class =form> < ul class =tab-group> < li class =tab active>< a href =＃signup> LeaderBoard< / a>< / li> < li class =tab>< a href =＃login> MedalTally< / a>< / li> < / ul> < div class =tab-content> < div id =signup> < div class =leaderboardid =leaderboard> < h1> < svg class =ico-cup> < use xlink：href =＃cup>< / use> < / svg>排行榜< / h1> < ol> < li> < mark> Jerry Wood< / mark> < small> 315< / small> < / li> < li> < mark> Brandon Barnes< / mark> < small> 301< / small> < / li> < li> < mark> Raymond Knight< / mark> < small> 292< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 245< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < li> < mark> Trevor McCormick< / mark> < small> 245< / small> < / li> < li> < mark> Andrew Fox< / mark> < small> 203< / small> < / li> < / ol> < / div> < svg style =display：none;> < symbol id =cupx =0pxy =0pxwidth =25pxheight =26pxviewBox =0 0 25 26enable-background =new 0 0 25 26xml：space =preserve> < path fill =＃F26856d =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.191 c0.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.301 c0.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.273 V1.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 =login> < div class =leaderboard> < h1> < svg class =ico-cup> < use xlink：href =＃cup>< / use> < / svg> Leaderboard1< / h1> < ol> < li> < mark> Jerry Wood1< / 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> < / div><！ - tab-content - > < / div>
I have two tabs "Overall LB" and "Weekly LB" .Lb denotes leaderboard.
Clicking on Overall displays a leaderboard with a particular score.
Question:
I want to display a leaderbaord with same style i.e use the same css, when I click the "weekly LB" tab.Both the leaderboard will have dioferent data as evident in the HTML below.
Kindly help.
$(document).ready(function() { $('.tab a').on('click', function(e) { e.preventDefault(); var _this = $(this); var block = _this.attr('href'); if (block == "#leaderboard") { $(block).fadeIn(); $('#login').hide(); $(document).find('.active').removeClass("active"); $(this).parent().addClass("active"); } if (block == "#login") { $(block).fadeIn(); $('#leaderboard').hide(); $(document).find('.active').removeClass("active"); $(this).parent().addClass("active"); } }); $('.tab.active a').click(); // Default open });
*, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; } 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: 330px; margin: 40px auto; border-radius: 20px; padding-bottom: 1px; } .tab-group { list-style: none; padding: 0; margin: auto; } .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 --------------------*/ 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; padding 10px; } /*-------------------- Leaderboard --------------------*/ .leaderboard { -webkit-transform: translate(0%, 0%); transform: translate(0%, 0%); width: 312px; 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); display: none; } .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: 5; top: 0; left: 0; width: 350%; height: 100%; padding: 18px 10px 18px 50px; margin: 0; background: none; color: #fff; } .leaderboard ol li mark::before, .leaderboard ol li mark::after { position: relative; z-index: 1; left: 9px; border-top: 10px solid #c24448; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; opacity: 0; } .leaderboard ol li mark::after { left: auto; border-left: none; border-right: 10px solid transparent; } .leaderboard ol li small { position: relative; z-index: 2; display: block; text-align: right; overflow: hidden; } .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; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Sign-Up/Login Form</title> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#leaderboard">Overall LB</a> </li> <li class="tab"><a href="#login">Weekly LB</a> </li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Jerry Wood</mark> <small>315</small> </li> <li> <mark>Brandon Barnes</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <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="login"> <h1></h1> <form action="/" method="post"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Jerry Wood</mark> <small>45</small> </li> <li> <mark>Brandon Barnes</mark> <small>30</small> </li> <li> <mark>Raymond Knight</mark> <small>29</small> </li> <li> <mark>Trevor McCormick</mark> <small>24</small> </li> <li> <mark>Andrew Fox</mark> <small>20</small> </li> <li> <mark>Andrew Fox</mark> <small>20</small> </li> <li> <mark>Trevor McCormick</mark> <small>19</small> </li> <li> <mark>Andrew Fox</mark> <small>18</small> </li> </ol> </div> </form> </div> </div> <!-- tab-content --> </div> <!-- /form --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
pIc :
Fiddle link for it : https://jsfiddle.net/Zedhmem/ju0xr8of/1/
解决方案Please check below source.
$(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"); if (block == "#signup") { $(block).fadeIn(); $('#login').hide(); } if (block == "#login") { $(block).fadeIn(); $('#signup').hide(); } }); });
*, *: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: 40px; max-width: 600px; margin: 40px auto; border-radius: 4px; box-shadow: 0 4px 10px 4px rgba(19, 35, 47, 0.3); } .tab-group { list-style: none; padding: 0; margin: 0 0 40px 0; } .tab-group:after { content: ""; display: table; clear: both; } .tab-group li a { display: block; text-decoration: none; padding: 15px; background: rgba(160, 179, 176, 0.25); color: #a0b3b0; font-size: 20px; float: left; width: 50%; text-align: center; cursor: pointer; -webkit-transition: .5s ease; transition: .5s ease; } .tab-group li a:hover { background: #179b77; color: #ffffff; } .tab-group .active a { background: #1ab188; color: #ffffff; } .tab-content > div:last-child { display: none; } /*-------------------- Body --------------------*/ *, *::before, *::after { box-sizing: border-box; } body { min-height: 450px; height: 100vh; 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; height: 308px; 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; } .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); } .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; } .leaderboard ol li:nth-child(1)::after { background: #fa6855; } .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(5) 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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#signup">LeaderBoard</a></li> <li class="tab"><a href="#login">MedalTally</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <h1> <svg class="ico-cup"> <use xlink:href="#cup"></use> </svg> Leaderboard </h1> <ol> <li> <mark>Jerry Wood</mark> <small>315</small> </li> <li> <mark>Brandon Barnes</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <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="login"> <div class="leaderboard"> <h1> <svg class="ico-cup"> <use xlink:href="#cup"></use> </svg> Leaderboard1 </h1> <ol> <li> <mark>Jerry Wood1</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> </div><!-- tab-content --> </div>
这篇关于使用javascript标签显示排行榜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
