实例 图片切换
<body>
<div id="poto">
<a class="poto_a" href=""><img src="static/images/1.jpg"></a>
<a class="poto_a" href=""><img src="static/images/2.jpg"></a>
<a class="poto_a" href=""><img src="static/images/3.jpg"></a>
<a class="poto_a" href=""><img src="static/images/4.jpg"></a>
<a class="poto_a" href=""><img src="static/images/5.jpg"></a>
<p>
<span onclick="function_name(0)">1</span>
<span onclick="function_name(1)">2</span>
<span onclick="function_name(2)">3</span>
<span onclick="function_name(3)">4</span>
<span onclick="function_name(4)">5</span>
</p>
</div>
<script type="text/javascript">
function function_name(num) {
var oba=document.getElementById('poto');
var oba_a=oba.getElementsByClassName('poto_a');
for(var i=0;i<oba_a.length;i++){
oba_a[i].style.display="none";
}
oba_a[num].style.display="block";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 按钮tab切换
<!DOCTYPE html>
<html>
<head>
<title>JavaScript的tab切换</title>
<link rel="icon" type="images/x-icon" href="static/images/favicon.ico">
<style type="text/css">
button{
color: #fff;
background:#292727;
border: none;
}
div{
margin-top: 10px;
width: 500px;
height: 500px;
border: 1px solid #000;
background: rgba(106,106,98,0.5);
display: none;
}
</style>
</head>
<body>
<button onclick="oba(0)">按钮1</button>
<button onclick="oba(1)">按钮2</button>
<button onclick="oba(2)">按钮3</button>
<button onclick="oba(3)">按钮4</button>
<div style="display: block">显示按钮1效果</div>
<div>显示按钮2效果</div>
<div>显示按钮3效果</div>
<div>显示按钮4效果</div>
<script type="text/javascript">
var oba = document.getElementsByTagName("button");
var oba_a = document.getElementsByTagName("div");
//给按钮添加点击事件
oba[0].onclick = function () {
oba[0].style.color = "#fff";
oba[0].style.backgroundColor = "#f60";
oba[1].style.color = "";
oba[1].style.backgroundColor = "";
oba[2].style.color = "";
oba[2].style.backgroundColor = "";
oba[3].style.color = "";
oba[3].style.backgroundColor = "";
oba_a[0].style.display = "block";
oba_a[0].style.backgroundColor = "#f60";
oba_a[1].style.display = "none";
oba_a[2].style.display = "none";
oba_a[3].style.display = "none";
}
oba[1].onclick = function () {
oba[0].style.color = "";
oba[0].style.backgroundColor = "";
oba[1].style.color = "#fff";
oba[1].style.backgroundColor = "#f60";
oba[2].style.color = "";
oba[2].style.backgroundColor = "";
oba[3].style.color = "";
oba[3].style.backgroundColor = "";
oba_a[0].style.display = "none";
oba_a[1].style.display = "block";
oba_a[1].style.backgroundColor = "#F02424";
oba_a[2].style.display = "none";
oba_a[3].style.display = "none";
}
oba[2].onclick = function () {
oba[0].style.color = "";
oba[0].style.backgroundColor = "";
oba[3].style.color = "";
oba[3].style.backgroundColor = "";
oba[2].style.color = "#fff";
oba[2].style.backgroundColor = "#f60";
oba[1].style.color = "";
oba[1].style.backgroundColor = "";
oba_a[0].style.display = "none";
oba_a[1].style.display = "none";
oba_a[3].style.display = "none";
oba_a[2].style.display = "block";
oba_a[2].style.backgroundColor = "#A024F0";
}
oba[3].onclick = function () {
oba[0].style.color = "";
oba[0].style.backgroundColor = "";
oba[3].style.color = "#fff";
oba[3].style.backgroundColor = "#f60";
oba[1].style.color = "";
oba[1].style.backgroundColor = "";
oba[2].style.color = "";
oba[2].style.backgroundColor = "";
oba_a[0].style.display = "none";
oba_a[1].style.display = "none";
oba_a[2].style.display = "none";
oba_a[3].style.display = "block";
oba_a[3].style.backgroundColor = "#F0E024";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<title>JavaScript的tab切换</title>
<link rel="icon" type="images/x-icon" href="static/images/favicon.ico">
<style type="text/css">
button{
color: #fff;
background:#292727;
border: none;
}
div{
margin-top: 10px;
width: 500px;
height: 500px;
border: 1px solid #000;
background: rgba(106,106,98,0.5);
display: none;
}
</style>
</head>
<body>
<button onclick="oba_name(0)">按钮1</button>
<button onclick="oba_name(1)">按钮2</button>
<button onclick="oba_name(2)">按钮3</button>
<button onclick="oba_name(3)">按钮4</button>
<div style="display: block">显示按钮1效果</div>
<div>显示按钮2效果</div>
<div>显示按钮3效果</div>
<div>显示按钮4效果</div>
<script type="text/javascript">
function oba_name(num) {
var oba = document.getElementsByTagName("button");
var oba_a = document.getElementsByTagName("div");
for (var i=0; i<oba_a.length; i++)
{
oba_a[i].style.display="none";
}
oba_a[num].style.display="block";
oba_a[num].style.background="#F02424";
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例