堆栈内存溢出
  简体   繁体   English

JS和CSS计数器增量中的标签

[英]tags in JS and css counter increment

 原文  2016-10-24 12:26:12  7   1    javascript/ jquery/ html/ mysql/ css

问题描述

 <!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">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"> <ol> <li> <mark>Shivam Sharma</mark> <small>315</small> </li> <li> <mark>Deepa B</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> </div> <div id="login"> </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> 
 *, *: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"> <li class="tab active"><a href="#leaderboard">RecentWeek</a></li> <li class="tab"><a href="#login">Overall</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Mustaque Rashid</mark> <small>315</small> </li> <li> <mark>Deepa Balasubramaniam</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> </div> <div id="login"> </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>

现在的情况

I have the above codes for the html ,css and js for a leaderboard . 我有上述代码用于排行榜的html，css和js。

Issue: 1.how can we get rid of the incremental counter in the left side of the leaderboard body. 问题：1.如何摆脱排行榜主体左侧的增量计数器。

2.how can we display the leaderboard as soon as the page loads ,not just the tags ie not just the leaderboard and medaltally tags. 2.如何在页面加载后立即显示排行榜，而不仅仅是标签，不仅是排行榜和奖牌标签。

3.how to include two more tags below the above tags ie below the leaderboard and medaltally. 3.如何在上述标签下方添加两个标签，即排行榜下方和奖牌下方。

Fiddle link for the above codes : link 上述代码的小提琴链接： 链接

1 个解决方案

解决方案1
 1 已采纳  2016-10-24 13:39:53

For the first issue. 对于第一个问题。 Add the following property into the .leaderboard ol li class 将以下属性添加到.leaderboard ol li类中 

    list-style: none;

For your second request replace the onclick jquery event handler code and replace it with the following inside the document.ready block 对于第二个请求，请替换onclick jquery事件处理程序代码，并将其替换为document.ready块中的以下内容 

$(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
                }
        });

For the 3 request: add 2 more li tags in the <ul class="tab-group"> as follows 对于3个请求：在<ul class="tab-group">添加2个li标签，如下所示 

<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>

Hope this helps. 希望这可以帮助。

[Edit] [编辑]

For css to look good do the follow: 为了使CSS看起来不错，请执行以下操作：

  1. add padding:0px !important; 添加padding:0px !important; property in the .leaderboard ol class .leaderboard ol类中的属性

  2. remove the height: 308px; 移除height: 308px; from the .leaderboard class. 来自.leaderboard类。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 增减计数器JS - Increment and decrement counter JS 节点js mongodb中的增量计数器 - increment counter in node js mongodb vue.js中的计数器未增加 - Counter not increment in vue.js 通过jQuery设置CSS counter-increment - Set CSS counter-increment via jQuery Angular JS：从控制器增加服务中的计数器 - Angular JS: Increment a Counter in a Service From Controller 递减计数器无法正常工作 - Decrement counter not working as expected with respect to increment counter-angular js 如何使第一个 li 值为 0，然后使用 css 计数器递增 2？ - How to make first li value 0 and then increment by 2 using css counter? Backbone.js Once（）事件方法：计数器增量示例 - Backbone.js once() event method: counter increment example React.js增量和减量计数器未正确映射 - React.js Increment and Decrement counter not mapping correctly Vue js 计数器递增/递减功能未按预期工作 - Vue js counter increment/decrement function not working as expected
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM