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>

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

HTML中的DIV切换相关推荐

HTML中各种 div 位置距离关系
HTML中各种 div 位置距离关系一. 盒模型图片展示: 二. 位置距离计算属性三. 应用场景一. 盒模型图片展示: 二. 位置距离计算属性 offsetWidth, offsetHeight ...
layui中tab的切换
layui中tab的切换,可使用element.tabChange(filter, layid);用于外部切换到指定的Tab项上,如:element.tabChange('demo', 'layid' ...
设置div中的div居中显示
设置div中的div居中显示方法一. <div class='big'><div class='small'>box1</div></div>styl ...
设计点击左侧切换页面进出_Axure教程：（初级）导航中的页面切换
本文给大家讲讲如何利用Axure进行导航中的页面切换,一起来看看~ 一.页面布局 (1)从左侧元件库拉入两个矩形作为导航按钮,分别命名为:页面1.页面2. (2)从左侧元件库拉入一个动态面板作为页面内 ...
在html中如何使用span,如何在HTML和CSS中使用DIV和span？
本文将帮助您理解和使用在css和HTML中如何使用"div"和"span",并用CSS对它们进行样式化.使用"div"的主要目的是将主体分成 ...
linux改英语环境,CentOS6.8中/英文环境切换教程图解
一.前言对于不习惯英文的人可能想将系统由英文转成中文:而对于考虑客户端如果没正确配置,中文目录可能显示为乱码的人则可能宁愿将系统由中文转成英文. 中文切换为英文,实际就是将LANG的值由zh_CN- ...
TabLayout让Fragment在ViewPager中的滑动切换更优雅
TabLayout让Fragment在ViewPager中的滑动切换更优雅转载于:https://www.cnblogs.com/zhujiabin/p/7382500.html
webbrowser控件有数据但页面空白_如何在Excel中实现可以切换不同数据系列的滚珠图?...
▲更多精彩内容,请点击上方Excel小铲子▲ 操作系统版本 Windows 10 64位 Excel版本 Microsoft Excel 2016 64位案例文档下载链接:https://pan. ...
mac下在eclipse中怎样清除/切换svn
mac下在eclipse中怎样清除/切换svn 1.打开终端,即用户的根文件夹(用户的home文件夹) 进入.subversion下的auth文件夹 localhost:auth brj$ pwd / ...

HTML中的DIV切换

HTML中的DIV切换相关推荐

最新文章

热门文章