今天给大家介绍一种不使用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 周四 12:40</p>
<p class="jieguo">化工院 <span>1</span></p>
<p class="jieguo">计科院 <span>0</span></p>
</div>
<div class="son1">
<p class="time">2018.3.22 周四 12:40</p>
<p class="jieguo">机电院 <span>3</span></p>
<p class="jieguo">马学院 <span>1</span></p>
</div>
<div class="son1">
<p class="time">2018.3.22 周四 15:00</p>
<p class="jieguo">材料院 <span>1</span></p>
<p class="jieguo">土建院 <span>1</span></p>
</div>
<div class="son1">
<p class="time">2018.3.22 周四 15:00</p>
<p class="jieguo">理学院 <span>0</span></p>
<p class="jieguo">留学生 <span>13</span></p>
</div>
<div class="son1">
<p class="time">2018.3.25 周日 12:40</p>
<p class="jieguo">经管院 <span>1</span></p>
<p class="jieguo">石工院 <span>2</span></p>
</div>
<div class="son1">
<p class="time">2018.3.25 周日 12:40</p>
<p class="jieguo">电信院 <span>3</span></p>
<p class="jieguo">外语院 <span>0</span></p>
</div>
<div class="son1">
<p class="time">2018.3.25 周日 12:40</p>
<p class="jieguo">地科院 <span>2</span></p>
<p class="jieguo">法艺联 <span>0</span></p>
</div>
</div>
我们来看一下效果:
点击第二轮就可以显示第二轮的赛程:
这个小技术也可以用到其他地方,如果有不懂的可在下方留言。