js 选项卡切换

最新推荐文章于 2023-01-05 15:00:37 发布

今天要早睡ya

最新推荐文章于 2023-01-05 15:00:37 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/cxc709467878/article/details/120533214

版权


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选项卡切换</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    
    #box {
        width: 404px;
        height: 295px;
        border: 1px solid #ccc;
        margin: 30px auto;
    }
    
    button {
        list-style: none;
        float: left;
        width: 101px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        padding-left: 29px;
        padding-right: 29px;
        background: white;
        outline: none;
        border: 1px solid #ccc;
    }
    
    button:hover {
        background: rgb(255, 192, 234);
        color: #fff;
    }
    
    #pi {
        width: 404px;
        height: 240px;
        margin-top: 50px;
    }
    
    img {
        width: 404px;
        height: 400px;
    }
</style>


<body>

    <div id="box">
        <button id="cxc_1">图片1</button>
        <button id="cxc_2">图片2</button>
        <button id="cxc_3">图片3</button>
        <button id="cxc_4">图片4</button>
        <div id=pi>
            <img class="imgs" src="img/1.jpg" />
        </div>
    </div>
</body>
<script>
    var cxc_1 = document.getElementById('cxc_1');
    var cxc_2 = document.getElementById('cxc_2');
    var cxc_3 = document.getElementById('cxc_3');
    var cxc_4 = document.getElementById('cxc_4');
    var i = document.getElementsByClassName("imgs")[0];
    cxc_1.onclick = function() {
        i.src = "img/1.jpg";
    };

    cxc_2.onclick = function() {
        i.src = "img/2.jpg";
    };

    cxc_3.onclick = function() {
        i.src = "img/3.jpg";
    };

    cxc_4.onclick = function() {
        i.src = "img/4.jpg";
    };
</script>

</html>

今天要早睡ya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 选项卡切换

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>..
复制链接

扫一扫