小技巧-不使用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>

我们来看一下效果：

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

 

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