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

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

本文代码只展示核心代码

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

                    

                        
第一轮
                        
第二轮
                        
第三轮
                        
1/4决赛
                        
5-8名赛
                        
半决赛
                        
季军赛
                        
决赛
                    
                

 

效果图（css自己设置）：

 

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

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

                    

                        
2018.3.22 周四 12:40
                        
化工院        1
                        
计科院        0
                    
                    

                        
2018.3.22 周四 12:40
                        
机电院        3
                        
马学院        1
                    
                    

                        
2018.3.22 周四 15:00
                        
材料院        1
                        
土建院        1
                    
                    

                        
2018.3.22 周四 15:00
                        
理学院        0
                        
留学生       13
                    
                    

                        
2018.3.25 周日 12:40
                        
经管院        1
                        
石工院        2
                    
                    

                        
2018.3.25 周日 12:40
                        
电信院        3
                        
外语院        0
                    
                    

                        
2018.3.25 周日 12:40
                        
地科院        2
                        
法艺联        0
                    
                

我们来看一下效果：

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

 

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