1.显示和隐藏标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//显示
function show(){
var p = document.getElementById('content'); //获取p元素
p.style.display = 'block'; //设置style style内的是css代码
}
//隐藏
function hide(){
var p = document.getElementById('content');
p.style.display = 'none';
}
</script>
</head>
<body>
<!--onclick内的是js代码-->
<button onclick="show();">显示</button>
<button onclick="hide();">隐藏</button>
<p id="content">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</body>
</html>
2.切换图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="images/icon_01.png">
<div>
<button id="previous">上一张</button>
<button id="next">下一张</button>
</div>
<script type="text/javascript">
var minIndex = 1;
var maxIndex = 9;
// 图片索引
var index = minIndex;
//上一张按钮
var previous = document.getElementById('previous');
previous.onclick = function () {
//操作索引
if (index == minIndex) {
index = maxIndex;
} else {
index--;
}
//根据索引显示对应的图片
var img = document.getElementsByTagName('img')[0];
img.src = 'images/icon_0' + index + '.png';
};
//下一张按钮
var next = document.getElementById('next');
previous.onclick = function () {
//操作索引
if (index == maxIndex){
index = minIndex;
}else {
index++;
}
//根据索引显示对应的图片
var img = document.getElementsByTagName('img')[0];
img.src = 'images/icon_0' + index + '.png';
};
</script>
</body>
</html>