您的位置：首页 > 其它

通过原生的方法来实现隐藏显示

2015-12-27 18:21 351 查看

可以通过原生的方法来实现隐藏显示

通过设置一个自定义标签 data－flag 绑定指控区域中的关联的东西（某种对应关系），

这里还可以不设置直接用 for循环中的 i 来关联也是可以的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn {
background: green;
width: 400px;
height: 100px;
cursor: pointer;
border: 1px solid red;
}

.page {
width: 500px;
height: 100px;
background: yellowgreen;
}
</style>
</head>
<body>
<div class="btn" data-flag="1"></div>
<section class="div1 page" data-t="false" id="page1" style="display: none"></section>
<div class="btn" data-flag="2"></div>
<section class="div2 page" data-t="false" id="page2" style="display: none"></section>
<div class="btn" data-flag="3"></div>
<section class="div3 page"  data-t="false" id="page3" style="display: none"></section>
</body>

<script>

var eles = document.getElementsByClassName('btn');
for (var i = 0; i < eles.length; ++i) {
eles[i].onclick = function () {
console.log(this.dataset.flag);
var page = document.getElementById('page' + this.dataset.flag);
var t = page.style.display;
if(t=='none'){
page.style.display='';
}else{
page.style.display='none';
}

}

}
//    document.getElementById("a").onclick = function () {
//        alert('aa');
//    }
</script>
</html>

效果图如下

隐藏

显示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

通过原生的方法 来实现 隐藏显示

通过原生的方法来实现隐藏显示