在html中用display怎么实现这个功能?

html-css07

在html中用display怎么实现这个功能?,第1张

这种事推荐使用Javascript做

试试这个代码

<!--

使用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了。