使用JS实现选项卡和滑动门的效果
什么是选项卡和滑动门??见下图:
怎么实现呢,下面我来教你
方法1:使用在button里的onclick方法change实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
button{width: 100px;height: 30px;border: 0px;margin-left:10px;float: left;background-color: pink;}
div{width: 320px;height: 300px;clear:both;margin-left:10px;display:none;}
.active{background-color: yellow;}
.display{background-color: #ff0000;display:block;}
</style>
</head>
<body>
<button class="active" οnclick="change(0)">科技</button>
<button οnclick="change(1)">军事</button>
<button οnclick="change(2)">文学</button>
<div class="display">科技123</div>
<div>军事123</div>
<div>文学123</div>
<script>
function change(index)
{
var button = document.getElementsByTagName('button');
var div = document.getElementsByTagName('div');
for (var i= 0;i<button.length;i++) {
if (index == i) {
button[i].className = 'active';
div[i].className = 'display';
} else {
button[i].className = '';
div[i].className = '';
}
}
}
</script>
</body>
</html>
方法2:使用window.onload方法实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
button{width: 100px;height: 30px;border: 0px;margin-left:10px;float: left;background-color: pink;}
div{width: 320px;height: 300px;clear:both;margin-left:10px;display:none;}
.active{background-color: yellow;}
.display{background-color: #ff0000;display:block;}
</style>
</head>
<body>
<button class="active">科技</button>
<button>军事</button>
<button>文学</button>
<div class="display">科技123</div>
<div>军事123</div>
<div>文学123</div>
<script>
window.onload = function()
{
var oBtn = document.getElementsByTagName('button');
var oDiv = document.getElementsByTagName('div');
for (var i = 0;i < oBtn.length;i++) {
oBtn[i].index = i;
oBtn[i].onclick = function()
{
for (var j = 0 ; j < oBtn.length; j++) {
oBtn[j].className = '';
oDiv[j].className = '';
}
this.className = 'active';
oDiv[this.index].className = 'display';
}
}
}
</script>
</body>
</html>
下面是运行出来的效果
滑动门就是鼠标滑动发生的和选项卡相同的效果,只需要把onclick方法改为onmouseover即可
耶耶耶,ok啦~