Tags in JS und CSS Zählerinkrement

<!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"> 
 
    \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 <div class="leaderboard" id="leaderboard"> 
 

 
    \t \t <ol> 
 
    \t \t \t <li> 
 
    \t \t \t <mark>Shivam Sharma</mark> 
 
    \t \t \t <small>315</small> 
 
    \t \t \t </li> 
 
    \t \t \t <li> 
 
    \t \t \t <mark>Deepa B</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 </ol> 
 
    \t \t </div> 
 

 

 
    \t 
 
     </div> 
 

 
    \t <div id="login"> 
 

 
    \t </div> 
 

 
    \t </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>

*, 
 
*: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; 
 

 

 
} 
 

 
.tab-group { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0 0 0 0; 
 
} 
 

 
.tab-group:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
.tab-group li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #a0b3b0; 
 
    font-size: 20px; 
 
    float: left; 
 
    width: 50%; 
 
    text-align: center; 
 
    cursor: pointer; 
 

 
    transition: .5s ease; 
 
} 
 

 
.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 
 
--------------------*/ 
 

 
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 { 
 

 

 
    width: 300px; 
 
    height: 400px; 
 

 
    display: none; 
 
} 
 

 

 
.leaderboard ol li { 
 
    position: inherit; 
 
    z-index: 1; 
 
    font-size: 14px; 
 
    counter-increment: leaderboard; 
 
    padding: 18px 10px 18px 10px; 
 
    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: 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; 
 
} 
 

 
.leaderboard ol li::after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 10; 
 
    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; 
 
}

<!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"> 
 
    \t <li class="tab active"><a href="#leaderboard">RecentWeek</a></li> 
 
    \t <li class="tab"><a href="#login">Overall</a></li> 
 
     </ul> 
 

 
     <div class="tab-content"> 
 
    \t <div id="signup"> 
 

 
    \t \t <div class="leaderboard" id="leaderboard"> 
 

 
    \t \t <ol> 
 
    \t \t \t <li> 
 
    \t \t \t <mark>Mustaque Rashid</mark> 
 
    \t \t \t <small>315</small> 
 
    \t \t \t </li> 
 
    \t \t \t <li> 
 
    \t \t \t <mark>Deepa Balasubramaniam</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 </ol> 
 
    \t \t </div> 
 

 

 
    \t 
 
     </div> 
 

 
    \t <div id="login"> 
 

 
    \t </div> 
 

 
    \t </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>

Ich habe den oben genannten Codes für das HTML, CSS und JS für eine Rangliste.

Ausgabe: 1. Wie können wir den inkrementellen Zähler auf der linken Seite des Leaderboard-Körpers loswerden.

2.wie können wir die Rangliste anzeigen, sobald die Seite geladen wird, nicht nur die Tags, d. H. Nicht nur die Rangliste und Medaltal Tags.

3.wie zwei weitere Tags unterhalb der oben genannten Tags, d. H. Unterhalb der Rangliste und medital, eingefügt werden.

Fiddle Link für die oben genannten Codes: link

Quelle

2016-10-24 Shivam Sharma

Für Ihre erste Ausgabe entfernen Sie 'counter-increment: leaderboard;' und 'content: counter (leaderboard);'. –

Danke für die Eingabe.Aber ich möchte das Counter-Inkrement auf der extremen linken Seite im schwarzen Hintergrund nicht aus der Rangliste loswerden. @ AndreiV –

Für die erste Ausgabe. Fügen Sie die folgende Eigenschaft in der Klasse .leaderboard ol li

list-style: none;

Für Ihre zweite Anfrage ersetzen die Onclick jquery Event-Handler-Code und ersetzen Sie es mit der folgenden innerhalb des document.ready Block

$(document).ready(function(){ 

       var _this = $('.tab a:first') 
       var block = _this.attr('href'); 
       if(block == "#leaderboard"){ 
        $(block).fadeIn(); 
        $('#login').hide(); 
        // code to hide other tabs if added 
       } 
     });

Für die 3 Anfrage: fügen Sie 2 weitere Li-Tags in der <ul class="tab-group"> wie folgt hinzu

<ul class="tab-group"> 
    <li class="tab active"><a href="#leaderboard">LeaderBoard</a></li> 
    <li class="tab"><a href="#login">MedalTally</a></li> 
    <li class="tab"><a href="#">Third Tag</a></li> 
    <li class="tab"><a href="#">Forth Tag</a></li> 
</ul>

Hoffe, dass dies hilft.

[Bearbeiten]

CSS gut aussehen tun die folgen:

padding:0px !important; Eigenschaft in der die height: 308px; aus der .leaderboard Klasse
entfernen .leaderboard ol Klasse hinzufügen.

Quelle

2016-10-24 13:39:53

Vielen Dank.Ich ein Genie.Gott segne. –

$ (Dokument) .ready (Funktion() { $ ('. Tab a'). On ('klicken', Funktion (e) { var _this = $ ('. Tab a: first') var block = _this.attr ('href'); if (block == "#leaderboard") { $ (block) .fadeIn(); $ ('# login'). hide(); // code to verstecken anderen Registerkarten, wenn hinzugefügt} if (Block == "#login") { $ (Block) .fadeIn(); $ ('# Rangliste') hide();. } \t \t}); }); –

Ich möchte das erste Tag ausblenden, nachdem Sie auf das zweite und seinen Inhalt geklickt haben.Wo genau mache ich den Fehler im obigen Code? @Nasir –

Tags in JS und CSS Zählerinkrement

Antwort

Verwandte Themen