在html中用display怎么实现这个功能?
发布网友
发布时间：2022-04-23 00:58
共2个回答
热心网友
时间：2022-05-13 05:46
试试这个代码
<!--
使用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>
热心网友
时间：2022-05-13 07:04
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
display: none;
}
#div1 {
background-color: red;
}
#div2 {
background-color: green;
}
</style>
</head>
<body>
<input type="button" onclick="button1()" id="b1" value="按钮 1" />
<input type="button" onclick="button2()" id="b2" value="按钮 2" />
<div id="div1">第 1 个 div</div>
<div id="div2">第 2 个 div</div>
<script type="text/javascript">
function button1() {
document.getElementById('div1').style.display = 'block'
document.getElementById('div2').style.display = 'none'
}
function button2() {
document.getElementById('div1').style.display = 'none'
document.getElementById('div2').style.display = 'block'
}
</script>
</body>
</html>
