HTML中的DIV切换

需求为一个页面的部分模块，随按钮点击进行切换。如图为tab1和tab2，点击“进行中”和“已结束”实现切换。

1. 添加两个按钮

<div style="font-size: 0"><!--取出两个button之间的间隙-->
                <button style="outline:none;border-radius:5px;background-color: #fdfdfe;border: none;width: 75px;height: 28px"
                        onclick="showDiv();">
                    <font size="4" color="#4a90e2">进行中</font></button>
                <button style="outline:none;border-radius:5px;background-color: #fdfdfe;border: none;width: 75px;height: 28px"
                        onclick="showDiv();">
                    <font size="4" color="#4a90e2">已结束</font></button>
  </div>

2. 添加两个div（要展现得内容在这里编写）

            <div id="div1" class="col-md-7 agileits_mail_grid_left"
                 style="display: block;background-color: #ffffff;border-radius:10px">
                <table class="table" style="background-color: #ffffff">
                    <tbody>
                    <tr>
                        <th class="anchorjs-icon"><font size="4" color="black">赛事名称</font></th>
                        <th class="anchorjs-icon"><font size="4" color="black">时间</font></th>
                        <th class="anchorjs-icon"><font size="4" color="black">主办方</font></th>
                    </tr>
                   <tr>
                   <!--从数据库中取对应的数据-->
                   </tr>
                    </tbody>
                </table>
            </div>

            <div id="div2" class="col-md-7 agileits_mail_grid_left"
                 style="display: none;background-color: #ffffff;border-radius:10px">
                <table class="table" style="background-color: #ffffff">
                    <tbody>
                    <tr>
                        <th class="anchorjs-icon"><font size="4" color="black">赛事名称</font></th>
                        <th class="anchorjs-icon"><font size="4" color="black">时间</font></th>
                        <th class="anchorjs-icon"><font size="4" color="black">主办方</font></th>
                    </tr>
                     <tr>
                   <!--从数据库中取对应的数据-->
                   </tr>
                    </tbody>
                </table>
            </div>

3. 添加JS函数（判断点击的是哪一个按钮）

        <script>
            function showDiv() {
                var div1=document.getElementById("div1");
                var div2=document.getElementById("div2");
                if (div1.style.display=='block')
                    div1.style.display='none';
                else div1.style.display='block';
                if (div2.style.display=='block')
                    div2.style.display='none';
                else div2.style.display='block';
            }
        </script>

以上可以写在一个文件里。