综合实例:选项卡(HTML,CSS,JS)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS综合实例_选项卡_HTML_CSS_JS</title>
<style type="text/CSS">
/* 全局样式 */
body,ul,li,a,img{padding:0px;margin:0px;}
ul,li{list-style:none;}
body{font-size:14px;}
.max{/* 最大的div的样式 */
text-align:center;
background-color: white;
width:300px;
height:600px;
margin:30px auto;}
/* 控制栏 */
.contrl{float:left;padding:18px 0px;width:100px;; background-color:blue ;}/* 控制处浮动 */
/* 图片栏 */
.imgdiv{float:left;width:300px;text-align:left;}/* 图片浮动 */
#img1div,#clear{clear:both;}/* 清除浮动 */
/* 图片类 */
.img{width:300px;height:557px;}
</style>
<script type="text/javascript">
window.onload = function () {
showimg(0);//网页加载完后直接调用一次showimg(0)设置默认显示的一页
};//推荐使用匿名函数再调用show(0);这样参数才会被识别,如果直接= "show(0)",参数0将不会识别
function showimg(index) {
switch (index) {
case 0: img1div.style.display = "block";
img2div.style.display = "none";
img3div.style.display = "none"; break;
case 1: img1div.style.display = "none";
img2div.style.display = "block";
img3div.style.display = "none"; break;
case 2: img1div.style.display = "none";
img2div.style.display = "none";
img3div.style.display = "block"; break;
}
}
</script>
</head>
<body>
<div class="max">
<div class="contrl" οnmοuseοver="showimg(0)" id=linkImg1>大美</div>
<div class="contrl" οnmοuseοver="showimg(1)" id=linkImg2>阿卡丽</div>
<div class="contrl" οnmοuseοver="showimg(2)" id=linkImg3>蒂法</div>
<div id=img1div class="imgdiv" style="display:'block';"><img id=img1 class="img" src="images/td1.jpg"></div>
<div id=img2div class="imgdiv" style="display:'none';"><img id=img2 class="img" src="images/td2.jpg"></div>
<div id=img3div class="imgdiv" style="display:'none';"><img id=img3 class="img" src="images/td3.jpg"></div>
<div id=clear></div>
</div>
</body>
<!-- /* contrl和contrl2控制的内容是相同的,只是contrl2是留给JS调用的,contrl是给CSS直接调用 */
/* .contrlx{float:left;padding:10px 0px;width:100px;background-color:#FFFF00 ;}/* 控制处浮动 */
/* 定义一个数组,把控制栏中的所有控制项放入 */
// var arr = ["linkImg1", "linkImg2", "linkImg3"];
// for (var i = 0; i < arr.length; i++) {
// /* 把所有的控制项都加上className="contrl2"的类名,从而使用CSS中预留的contrl2类的样式 */
// document.getElementById(arr[i]).className.style.backgroundColor = "#FFFF00";
// alert("0");
//
// };
-->
</html>
显示效果如下: