1. 首頁
  2. 問答
  3. JavaScript的標籤，我點擊

JavaScript的標籤，我點擊

2016-10-25 91 views
0

current statusJavaScript的標籤，我點擊

我有一個問題必須這兒過得兩個標籤在這裏「LB‘和’medalTally」。我需要在頁面加載時默認顯示第一個標籤頁信息，當我點擊第二個標籤頁時，它應該隱藏。我有一些代碼。 任何人都可以幫助我在哪裏我犯了錯誤。

$(document).ready(function() { 
 
    var _this = $('.tab a:first') 
 
    var block = _this.attr('href'); 
 
    $('.tab a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var _this = $(this); 
 
    var block = _this.attr('href'); 
 
    if (block == "#leaderboard") { 
 
     $(block).fadeIn(); 
 
     $('#login').hide(); 
 
    } 
 
    if (block == "#login") { 
 
     $(block).fadeIn(); 
 
     $('#leaderboard').hide(); 
 
    } 
 
    }); 
 
});

撥弄鏈接它：https://jsfiddle.net/Zedhmem/ju0xr8of/1/

來源

2016-10-25 Shivam Sharma

回答

2

只需添加在JavaScript一行：

$('.tab.active a').click();

它將點擊活動標籤上$(document).ready

https://jsfiddle.net/ju0xr8of/7/

來源

2016-10-25 04:56:59 Sachin

+0

喔。非常感謝@ Sachin –

+0

另外，當我點擊獎牌標籤tab.Ofcourse時，我們可以擁有相同的排行榜，我將在表中有不同的值，我會照顧。我試圖在登錄div id –

0

它看起來像你只是缺少代碼行來默認顯示第一個標籤信息。我說這下右後的document.ready

$(document).ready(function() { 
 
    $("#leaderboard").fadeIn(); //This displays the first tab info by default**  
 
    var _this = $('.tab a:first') 
 
    var block = _this.attr('href'); 
 
    $('.tab a').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var _this = $(this); 
 
    var block = _this.attr('href'); 
 
    if (block == "#leaderboard") { 
 
     $(block).fadeIn(); 
 
     $('#login').hide(); 
 
    } 
 
    if (block == "#login") { 
 
     $(block).fadeIn(); 
 
     $('#leaderboard').hide(); 
 
    } 
 
    }); 
 
});

來源

2016-10-25 05:00:15 natel

0

在頁面加載刪除display:none。你可以在CSS中刪除它。

$(document).ready(function(){ 
 
\t \t \t \t $('.tab a').on('click',function(e){ 
 
\t \t \t \t \t e.preventDefault(); 
 
\t \t \t \t \t var _this = $(this); 
 
\t \t \t \t \t var block = _this.attr('href'); 
 
\t \t \t \t \t if(block == "#leaderboard"){ 
 
\t \t \t \t \t \t $(block).fadeIn(); 
 
\t \t \t \t \t \t $('#login').hide(); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(block == "#login"){ 
 
\t \t \t \t \t \t $(block).fadeIn(); 
 
\t \t \t \t \t \t $('#leaderboard').hide(); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t });
*, *: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/1.11.1/jquery.min.js"></script> 
 
<div class="form"> 
 

 
    <ul class="tab-group"> 
 
\t <li class="tab active"><a href="#leaderboard">LeaderBoard</a></li> 
 
\t <li class="tab"><a href="#login">MedalTally</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
\t <div id="signup"> 
 
\t 
 
\t \t <div class="leaderboard" id="leaderboard"> 
 
\t \t <h1> 
 
\t \t \t <svg class="ico-cup"> 
 
\t \t \t <use xlink:href="#cup"></use> 
 
\t \t \t </svg> 
 
\t \t \t Leaderboard 
 
\t \t </h1> 
 
\t \t <ol> 
 
\t \t \t <li> 
 
\t \t \t <mark>Jerry Wood</mark> 
 
\t \t \t <small>315</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Brandon Barnes</mark> 
 
\t \t \t <small>301</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Raymond Knight</mark> 
 
\t \t \t <small>292</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Trevor McCormick</mark> 
 
\t \t \t <small>245</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Trevor McCormick</mark> 
 
\t \t \t <small>245</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t 
 
\t \t </ol> 
 
\t \t </div> 
 

 

 
\t \t <svg style="display: none;"> 
 
\t \t <symbol id="cup" x="0px" y="0px" 
 
\t \t \t width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t \t </symbol> 
 
\t \t </svg> 
 
    </div> 
 

 
\t <div id="login"> 
 
\t <h1>Welcome Back!</h1> 
 

 
\t <form action="/" method="post"> 
 

 
\t \t <div class="field-wrap"> 
 
\t \t \t <label> 
 
\t \t \t Email Address<span class="req">*</span> 
 
\t \t \t </label> 
 
\t \t \t <input type="email"required autocomplete="off"/> 
 
\t \t </div> 
 

 
\t \t <div class="field-wrap"> 
 
\t \t \t <label> 
 
\t \t \t Password<span class="req">*</span> 
 
\t \t \t </label> 
 
\t \t \t <input type="password"required autocomplete="off"/> 
 
\t \t </div> 
 

 
\t \t <p class="forgot"><a href="#">Forgot Password?</a></p> 
 

 
\t \t <button class="button button-block"/>Log In</button> 
 

 
\t </form> 
 

 
\t </div> 
 

 
\t </div><!-- tab-content --> 
 

 
</div> <!-- /form -->

來源

2016-10-25 05:07:30

+0

內複製html頁面的領導班的內容非常感謝。另外，當我點擊獎牌標籤時，我們是否可以擁有相同的排行榜。當然，我會在表格中有不同的值，我會照顧。我試圖複製html頁面的領導班內容登錄div id –

+0

@ShivamSharma你需要爲你的其他選項卡相同的排行榜？簡單複製和粘貼領導班的內容應該可以工作。 –

+0

Thanks.Yeah它會包含不同的values.It將每週排行榜 –

1

只能插入開放點擊事件

我嘗試你的第二個錯誤的決心內文件準備好。當你點擊第二個div然後活動的類不在那裏。代碼

首先刪除active類，然後在點擊div時添加活動類。

腳本

$(document).find('.active').removeClass("active"); 
$(this).parent().addClass("active");

現場演示Here

片段實施例下面

$(document).ready(function(){ 
 
\t \t \t \t $('.tab a').on('click',function(e){ 
 
\t \t \t \t \t e.preventDefault(); 
 
      var _this = $(this); 
 
\t \t \t \t \t var block = _this.attr('href'); 
 
\t \t \t \t \t if(block == "#leaderboard"){ 
 
\t \t \t \t \t \t $(block).fadeIn(); 
 
\t \t \t \t \t \t $('#login').hide(); 
 
      $(document).find('.active').removeClass("active"); 
 
      $(this).parent().addClass("active"); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t if(block == "#login"){ 
 
\t \t \t \t \t \t $(block).fadeIn(); 
 
\t \t \t \t \t \t $('#leaderboard').hide(); 
 
      $(document).find('.active').removeClass("active"); 
 
      $(this).parent().addClass("active"); 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 

 
$('.tab.active a').click(); // Default open 
 
\t \t \t });
*, *: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); 
 
    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; 
 
} 
 
.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"> 
 
\t <li class="tab active"><a href="#leaderboard">LeaderBoard</a></li> 
 
\t <li class="tab"><a href="#login">MedalTally</a></li> 
 
    </ul> 
 

 
    <div class="tab-content"> 
 
\t <div id="signup"> 
 
\t 
 
\t \t <div class="leaderboard" id="leaderboard"> 
 
\t \t <h1> 
 
\t \t \t <svg class="ico-cup"> 
 
\t \t \t <use xlink:href="#cup"></use> 
 
\t \t \t </svg> 
 
\t \t \t Leaderboard 
 
\t \t </h1> 
 
\t \t <ol> 
 
\t \t \t <li> 
 
\t \t \t <mark>Jerry Wood</mark> 
 
\t \t \t <small>315</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Brandon Barnes</mark> 
 
\t \t \t <small>301</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Raymond Knight</mark> 
 
\t \t \t <small>292</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Trevor McCormick</mark> 
 
\t \t \t <small>245</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Trevor McCormick</mark> 
 
\t \t \t <small>245</small> 
 
\t \t \t </li> 
 
\t \t \t <li> 
 
\t \t \t <mark>Andrew Fox</mark> 
 
\t \t \t <small>203</small> 
 
\t \t \t </li> 
 
\t \t 
 
\t \t </ol> 
 
\t \t </div> 
 

 

 
\t \t <svg style="display: none;"> 
 
\t \t <symbol id="cup" x="0px" y="0px" 
 
\t \t \t width="25px" height="26px" viewBox="0 0 25 26" enable-background="new 0 0 25 26" xml:space="preserve"> 
 
\t \t <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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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 
 
\t \t \t 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"/> 
 
\t \t \t </symbol> 
 
\t \t </svg> 
 
    </div> 
 

 
\t <div id="login"> 
 
\t <h1>Welcome Back!</h1> 
 

 
\t <form action="/" method="post"> 
 

 
\t \t <div class="field-wrap"> 
 
\t \t \t <label> 
 
\t \t \t Email Address<span class="req">*</span> 
 
\t \t \t </label> 
 
\t \t \t <input type="email"required autocomplete="off"/> 
 
\t \t </div> 
 

 
\t \t <div class="field-wrap"> 
 
\t \t \t <label> 
 
\t \t \t Password<span class="req">*</span> 
 
\t \t \t </label> 
 
\t \t \t <input type="password"required autocomplete="off"/> 
 
\t \t </div> 
 

 
\t \t <p class="forgot"><a href="#">Forgot Password?</a></p> 
 

 
\t \t <button class="button button-block"/>Log In</button> 
 

 
\t </form> 
 

 
\t </div> 
 

 
\t </div><!-- tab-content --> 
 

 
</div> <!-- /form -->

來源

2016-10-25 05:08:31

+0

非常感謝。生成感。另外，當我點擊獎牌標籤時，我們是否可以擁有相同的排行榜。當然，我會在表格中有不同的值，我會照顧的。@ Sumit –

0

只需觸發點擊第一個選項卡，並且應該做的伎倆

$('.tab a:first').trigger("click");

查看更新工作小提琴

https://jsfiddle.net/vigneshvdm/ju0xr8of/9/

來源

2016-10-25 05:13:59

+1

非常感謝。有道理。另外，當我點擊獎牌標籤時，我們是否可以擁有相同的排行榜。當然，我會在表格中有不同的值，我會照顧。我試圖在登錄div id中複製html頁面的領導類的內容。 –

相關問題

 相關問題