2609次阅读
Tab切换效果
之前没接触过JavaScript，但是看了一下，入门还真是挺简单的，入门案例如下：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
<script>
window.onload = function() {
window.alert("Hello World!");
};
</script>
</head>
<body>
<h1>Tab切换效果</h1>
</body>
check the result
JavaScript脚本一般写在script标签内，window.onload是当网页被打开加载的时候会触发的事件，我们让它等于一个函数，意思是网页打开的时候去执行这个函数。window.alert是弹框，内容就是里面的字符串啦！
那么浏览器是怎么执行这段代码的呢？首先浏览器会执行所有script标签中的代码，然后会触发一些事件，而绑定了事件监听的代码在相应事件被触发的时候就会被执行啦，不懂的话再来看个例子：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
</head>
<body>
<button id="btn">点我吧</button>
<script>
document.getElementById("btn").onclick = function() {
window.alert("clicked");
}
</script>
</body>
check the result
这个例子是点击按钮的时候能够弹出对话框。注意，这里我们用document.getElementById的方法来获取元素，其中id就是对应button中的id属性啦。这时并不是一打开网页就会弹框，因为打开网页时，我们只是给按钮的点击事件绑定了监听器，而当真正点击按钮的时候，才产生点击事件，这时候才会触发function中的代码，弹出框框。还有一点值得注意，这里的script要写在button之后，因为浏览器是顺序加载html，如果在执行script之前，没有找到对应的button，那么将不能绑定事件。
有了这个基础，再结合display，我们很容易就能做出tab切换的效果：
<!DOCTYPE html>
<head>
<meta charset=utf-8 />
<title>Tab切换效果</title>
<style>
.bigbox {
width : 600px;
height : 500px;
}
.tabbox {
width : 100%;
height : 100px;
}
.tab {
margin-left : 1%;
margin-right : 1%;
width : 31%;
height : 100%;
line-height : 100px;
text-align : center;
font-size : 16px;
float : left;
background-color : gray;
cursor : pointer;
}
.tab:hover {
background-color : yellow;
}
.content {
width : 100%;
height : 400px;
display : none;
}
</style>
</head>
<body>
<div class="bigbox">
<div class="tabbox">
<div class="tab" id="tab1">tab1</div>
<div class="tab" id="tab2">tab2</div>
<div class="tab" id="tab3">tab3</div>
</div>
<div class="content" id="content1" style="background-color : red;">
content1
</div>
<div class="content" id="content2" style="background-color : blue;">
content2
</div>
<div class="content" id="content3" style="background-color : green;">
content3
</div>
</div>
<script>
var hideAll = function() {
document.getElementById('content1').style.display = 'none';
document.getElementById('content2').style.display = 'none';
document.getElementById('content3').style.display = 'none';
};
var tab1 = document.getElementById('tab1');
var tab2 = document.getElementById('tab2');
var tab3 = document.getElementById('tab3');
tab1.onclick = function() {
hideAll();
document.getElementById('content1').style.display = 'block';
};
tab2.onclick = function() {
hideAll();
document.getElementById('content2').style.display = 'block';
};
tab3.onclick = function() {
hideAll();
document.getElementById('content3').style.display = 'block';
};
document.getElementById('content1').style.display = 'block';
</script>
</body>
check the result
在JavaScript里面var就是变量的意思，我们把id为tab1的div存在一个叫做tab1的变量里面，给它绑定点击事件，在点击的时候改变content的显示与非显示，就完成了tab切换。需要注意的是，我们在这里定义了一个hideAll函数，然后就可以通过hideAll()来调用它，在JavaScript中，函数也可以被看成一个变量。
如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点赞助
，不要超过100元哦！
，不要超过100元哦！
评论请先登录