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.69C6.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.148C0,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.563c-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.303c0.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.191c-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.525c0.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.257c-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.31c0.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.865c-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.148C25,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.99c1.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.883L18.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.686c0.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.033C13.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.273C17.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.06c0-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标签显示排行榜的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!
05-27 12:48
查看更多