前端：JS/30/综合实例：选项卡（HTML，CSS，JS）

最新推荐文章于 2024-01-24 12:19:34 发布

浅香沉木

最新推荐文章于 2024-01-24 12:19:34 发布

阅读量202

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Java_53/article/details/106140287

版权

综合实例：选项卡（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>

显示效果如下：

@沉木

浅香沉木

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端：JS/30/综合实例：选项卡（HTML，CSS，JS）

综合实例：选项卡（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> &lt
复制链接

扫一扫