试试这个代码
<!--
使用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:none 你这个写法是兼容ie的写法,所以不显示了, 你在写一个display:none这样火狐里面也可以实现隐藏了!常见的特殊情况:之前曾对div设置过display:hidden。不用jQuery可以这样实现:你可以在div中写个id = “div”,然后在JS中可以写:
document.getElementById("div").style.display = "block"//使id="div"的div是display属性为block
这样就可以显示这个div了。