试试这个代码
<!--
使用div实现简单选项卡
-->
<!DOCTYPE html>
<html>
<head>
<title>HTML实现简单选项卡</title>
<meta charset="utf-8">
<style type="text/css">
.sli-active{
color: yellow !important
}
.sli-btn{
background:linear-gradient(to right,black,rgb(10,15,10))
color: white
width: 100px
height: 20px
display: inline-block
}
.btns{
background:linear-gradient(to right,black,grey)
display: flex
height: 20px
}
.sli-info{
background:linear-gradient(to right,black,grey)
color: white
}
*{
margin: 0
padding: 0
}
</style>
</head>
<body>
<!-- 按钮div(用户点击的) -->
<div class="btns">
<div id="btn_1" class="sli-btn sli-active">一号</div>
<div id="btn_2" class="sli-btn">二号</div>
</div>
<!-- 内容div(实际展示信息的) -->
<div id="info1" class=sli-info>
一号按钮对应的信息
</div>
<div id="info2" style="display: none" class=sli-info>
二号按钮对应的信息
</div>
<!-- javascript脚本 -->
<script type="text/javascript">
//获取所有元素(div)
var btn1 = document.getElementById('btn_1')
var btn2 = document.getElementById('btn_2')
var info1 = document.getElementById('info1')
var info2 = document.getElementById('info2')
//绑定事件句柄(通俗来讲就是叫浏览器知道当用户点击按钮的时候执行什么)
//一号按钮被按下(为了支持触摸以及鼠标设备，同时绑定onclick(点击)和ontouchstart(手放在屏幕上))
btn1.addEventListener("click",function(){
//显示信息1，隐藏信息2
info2.style.display="none"
info1.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn1.className="sli-active sli-btn"
})
btn1.addEventListener("touchstart",function(){
//显示信息1，隐藏信息2
info2.style.display="none"
info1.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn1.className="sli-active sli-btn"
})
//二号按钮被按下(为了支持触摸以及鼠标设备，同时绑定onclick(点击)和ontouchstart(手放在屏幕上))
btn2.addEventListener("click",function(){
//显示信息2，隐藏信息1
info1.style.display="none"
info2.style.display="block"
//更改按钮视觉效果
btn1.className="sli-btn"
btn2.className="sli-active sli-btn"
})
btn2.addEventListener("touchstart",function(){
//显示信息2，隐藏信息1
info1.style.display="none"
info2.style.display="block"
//更改按钮视觉效果
btn2.className="sli-btn"
btn2.className="sli-active sli-btn"
})
</script>
</body>
</html>
利用display命令，设置是否及如何显示元素。display 显示状态
display:none 隐藏
display:block 块显示
display:inline 内嵌
display:table 表格显示
display:list-item 项目列表
这个属性用于定义建立布局时元素生成的显示框类型。
对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
display，英 [dɪ'spleɪ] 美 [dɪ'sple]，意思是展现、陈列、使看见。
折叠例句如下：
1、Let's display the figures and see what we have.
翻译：让我们显示一下数字，看看我们有什么。
2、Department stores display their goods in the windows.
翻译：百货商店把商品陈列在橱窗里。
3、Her attention was engaged by the display of the new dress in the ship windows.
翻译：她的注意力被商店橱窗里陈列的新式女服所吸引。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
【注释】：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。
拓展资料：Thomas Knoll在创建Photoshop以前自己开发的一个小程序。Thomas发现当时的苹果电脑无法显示带灰度的黑白图像，因此他自己写了一个程序Display。
而他兄弟(也可能是哥哥)John这时在星球大战导演Lucas的电影特殊效果制作公司Industry Light Magic工作，对Thomas的程序很感兴趣。两兄弟在此后的一年多把Display不断修改为功能更为强大的图像编辑程序，经过多次改名后，在一个展会上他们接受一个参展观众建议把程序改名为Photoshop。此时的Display/Photoshop已经有Level，色彩平衡，饱和度等调整。此外John写了一些程序后来成为插件(Plug-in)的基础。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）