小技巧-不使用js制作高级足球比赛赛程表

今天给大家介绍一种不使用js而用id来实现制作高级足球比赛赛程表（点击轮次即可显示出对应的轮次的赛程，后文会详细说明）

本文代码只展示核心代码

我们先用a标签写出轮次图的代码：（a里面的href使用id）

<div class="lunci3"><ul><li><a href="#1">第一轮</a></li><li><a href="#2">第二轮</a></li><li><a href="#3">第三轮</a></li><li><a href="#4">1/4决赛</a></li><li><a href="#5">5-8名赛</a></li><li><a href="#6">半决赛</a></li><li><a href="#7">季军赛</a></li><li><a href="#8">决赛</a></li></ul></div>

效果图（css自己设置）：

然后在下面写一个父盒子，设置宽高。在父盒子里面写8（有多少轮就写多少个子盒子）个与父盒子同样大小的子盒子，并且给父盒子设置overflow:hidden; 这样父盒子里面就只能显示一个子盒子，给子盒子设置不同的id，然后通过id来控制显示其中一个盒子，这样就可以通过点击轮次来显示对应轮次的赛程了。

此处展示一个子盒子的代码：

<div class="diyilun" id="1"><div class="son1"><p class="time">2018.3.22&nbsp;周四&nbsp;12:40</p><p class="jieguo">化工院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p><p class="jieguo">计科院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></p></div><div class="son1"><p class="time">2018.3.22&nbsp;周四&nbsp;12:40</p><p class="jieguo">机电院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>3</span></p><p class="jieguo">马学院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p></div><div class="son1"><p class="time">2018.3.22&nbsp;周四&nbsp;15:00</p><p class="jieguo">材料院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p><p class="jieguo">土建院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p></div><div class="son1"><p class="time">2018.3.22&nbsp;周四&nbsp;15:00</p><p class="jieguo">理学院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></p><p class="jieguo">留学生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>13</span></p></div><div class="son1"><p class="time">2018.3.25&nbsp;周日&nbsp;12:40</p><p class="jieguo">经管院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>1</span></p><p class="jieguo">石工院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>2</span></p></div><div class="son1"><p class="time">2018.3.25&nbsp;周日&nbsp;12:40</p><p class="jieguo">电信院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>3</span></p><p class="jieguo">外语院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></p></div><div class="son1"><p class="time">2018.3.25&nbsp;周日&nbsp;12:40</p><p class="jieguo">地科院&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>2</span></p><p class="jieguo">法艺联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></p></div></div>

我们来看一下效果：

点击第二轮就可以显示第二轮的赛程：

这个小技术也可以用到其他地方，如果有不懂的可在下方留言。

小技巧-不使用js制作高级足球比赛赛程表相关推荐

Python数据分析小技巧：如何在Pandas中实现数据透视表?
Python数据分析小技巧:如何在Pandas中实现数据透视表? 数据透视表是数据分析中非常有用的工具,可以帮助我们快速了解数据的结构.关联和趋势.在Pandas中,我们可以使用pivot_table ...
python足球联赛赛程_足球联赛赛程表工作表
比赛时间比赛对手比赛地点比赛服装带队领导及教练 11月9日8:50 庐阳中学--五十六中十九中穿红带蓝戴鹏程罗春光 11月16日8:50 庐阳中学--四十八中十九中穿蓝带红单军 ...
python足球联赛赛程_python爬取足球比赛赛程笔记
目标:爬取某网站比赛赛程,动态网页,则需找到对应ajax请求(具体可参考:https://blog.csdn.net/you_are_my_dream/article/details/53399949 ...
几个小技巧提升微课制作效率
随着网络的普及,线上教育变得越来越热门,尤其是疫情爆发之后,线上教育变得尤为重要.下面我将使用Camtasia 2020(Win版)来为大家介绍如何高效率的制作微课. Camtasia免费版下载:ht ...
html js制作高级拼图,基于JavaScript实现十五拼图代码实例
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-s ...
python足球联赛赛程_足球联赛赛程表生成
热刺对布莱顿比分 Same time every year around the end of march or so I always start thinking about summer and ...
足球联赛赛程表思路(转)
这个算法叫做蛇环算法. 即,把所有球队排成一个环形(2列),左边对阵右边,第一支队伍不动,其他队伍顺时针循环,这样就肯定不重复了. 为了方便说明,假设有8支球队a到h.像下面那样按环形 ...
2019如何新建流程图_用Word制作流程图，居然还有这么多小技巧
用Word制作流程图,是我们经常会用到的功能,本期Word妹与大家分享在制作流程图时一个流程图的制作小技巧. 效果图: 制作小技巧: 1.插入绘图区点击插入--形状--新建画布,之后根据需要调整画布 ...
鸡肋小技巧：js中用parseInt实现N次方的计算
在js使用过程中,parseInt是一个比较常用的函数,而不同于parseFloat,parseInt还有第二个参数,用于指定解析为int类型时的进制,例如parseInt('100',10)就是将字 ...

小技巧-不使用js制作高级足球比赛赛程表

小技巧-不使用js制作高级足球比赛赛程表相关推荐

最新文章

热门文章