js实现隐藏和显示html
通常，我们的目的是在点击一个按钮时触发显示样式的不同；
1. 首先清楚我们需要默认展示的样式，其次需要找到点击某个按钮后需要展示的样式；
对于默认展示的样式：我们需要设置style=”display:block”
<div class="col-sm-6 deleteType-item" style="display: block">
<label class="col-sm-4 control-label"></label>
<button class="btn btn-primary" onclick="deleteCourse()">删除课程</button>
</div>
<div class="col-sm-6 addType-item" style="display: none">
<label class="col-sm-4 control-label"></label>
<button class="btn btn-primary" onclick="addCourse()">增加课程</button>
</div>
对于需要隐藏的样式：需要设置style=”display:none”
并对不同的类型设置不同的class标签，比如删除课程设置的是deleteType-item, 增加课程设置的是addType-item
2. 其次需要在不同的条件下展示不同的样式，以下面的实现为例，我们需要在select框发生变化的时候，来确定到底是删课还是加课，onchange=”permissionChange()”方法正是帮助我们来改变样式的；
<div class="col-sm-4">
<select class="form-control" id="permissionType" onchange="permissionChange()">
<option value="delete">删课</option>
<option value="add">加课</option>
</select>
</div>
3. 通过js代码控制显示的html， 我们获取到select框的id, 并获取到对应的value, 根据1中的className 获取到对应的节点。然后遍历每种节点的list， 进行修改
function permissionChange() {
var perObj = document.getElementById(\'permissionType\');
var perOption = perObj.options[perObj.selectedIndex] || null;
var addItems = document.getElementsByClassName(\'addType-item\');
var deleteItems = document.getElementsByClassName(\'deleteType-item\');
if (perOption.value === \'delete\') {
for (var i = 0; i < deleteItems.length; i++) {
deleteItems[i].style.display = \'block\';
}
for (var i = 0; i < addItems.length; i++) {
addItems[i].style.display = \'none\';
}
} else {
for (var i = 0; i < deleteItems.length; i++) {
deleteItems[i].style.display = \'none\';
}
for (var i = 0; i < addItems.length; i++) {
addItems[i].style.display = \'block\';
}
}
}
版权声明：本文为leavescy原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。