怎么通过js 改变display
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么通过js 改变display相关的知识，希望对你有一定的参考价值。
参考技术A1、打开hbuilder软件，新建一个空白的html文件，输入基本的html结构，这里设置一个button按钮用来显示隐藏div，并且给按钮一个id，命名为show。同样也给div一个id，命名为hide：
2、在下方编写js代码，首先给获取button的dom元素，并给其一个click事件，然后获取div的dom，修改disply的属性为block，即让隐藏的div显示出来：
3、按下crtl+S保存，在浏览器里观察效果：
4、点击显示隐藏的按钮，隐藏的div就出现了。以上就是用js控制display属性的过程：
改变li标签的className以及改变content的display属性 {选项卡的制作}
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选项卡的制作</title>
<script src="../js/try.js"></script>
<style type="text/css">
ul#tabNav{
width:400px;
list-style:none;
border-bottom:1px solid green;
margin:0;
padding-left:0;
padding-bottom:26px;
*padding-bottom: 0;
}
ul#tabNav li{
float:left;
height:25px;
margin:0 10px -2px 0;
background-color:green;
color:black;
border:1px solid green;
border-bottom:0;
padding:0;
}
ul#tabNav a:link ,ul#tabNav a:visited {
display:block;
text-decoration:none;
padding：5px 10px 3px 10px;
}
#tabContent{
width:400px;
height:200px;
border:1px solid green;
border-top-width: 0;
}
#tabNav li.tabSelected{
background-color:#ffcc00;
color:#fff;
}
</style>
</head>
<body>
<ul id="tabNav">
<li onmouseover="showContent(1)" id="tab1" class="tabSelected">
<a href="">新闻</a>
</li>
<li onmouseover="showContent(2)" id="tab2" class="">
<a href="">体育</a>
</li>
<li onmouseover="showContent(3)" id="tab3" class="">
<a href="">娱乐</a>
</li>
</ul>
<div id="tabContent">
<div id="content1">新闻内容</div>
<div id="content2" style="display:none">体育内容</div>
<div id="content3" style="display:none">娱乐内容</div>
</div>
</body>
</html>
JS
function showContent(index){ /*展示第index个内容*/
var e = document.getElementById("content"+index); /*先将第index的div元素取到*/
e.style.display=""; /*将当前的display设置“”，即显示*/
for(var i=1;i<4;i++){
if(i != index){
var e2 = document.getElementById("content"+i);
e2.style.display="none";
document.getElementById("tab"+i).className=""; /*不是当前选中的则清空className*/
}
else{
document.getElementById("tab"+i).className="tabSelected"; /*将当前选中的设置为tabSelected*/
}
}
}
以上是关于怎么通过js 改变display的主要内容，如果未能解决你的问题，请参考以下文章
请问一下，C# js里面文本框的改变事件怎么写（主要是实现给用户发送信息，绑定2个文本框，一个存id）
如何给 Python Tkinter 给窗口加标题、改变 button 文本？