tab栏切换(点击图片切换路径)

最新推荐文章于 2022-05-01 13:20:17 发布

原创最新推荐文章于 2022-05-01 13:20:17 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #图片

javascript效果类专栏收录该内容

7 篇文章

订阅专栏

该博客介绍了如何使用HTML、CSS和JavaScript实现一个通过点击图片来切换Tab内容的效果。内容包括HTML结构设定、CSS样式定义以及JavaScript事件处理，旨在帮助开发者创建交互式的网页界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里是html代码

<ul>
    <li><a href="images/01.jpg"><img src="images/01.jpg" alt="" class="small"/></a></li>
    <li><a href="images/02.jpg"><img src="images/02.jpg" alt="" class="small"/></a></li>
    <li><a href="images/03.jpg"><img src="images/03.jpg" alt="" class="small"/></a></li>
    <li><a href="images/04.jpg"><img src="images/04.jpg" alt="" class="small"/></a></li>
    <li><a href="images/05.jpg"><img src="images/05.jpg" alt="" class="small"/></a></li>
</ul>

这里是css代码

    .small {
        width: 180px;
    }
    li {
        float: left;
        list-style: none;
        margin-right: 20px;
    }
    ul {
        width: 1000px;
        margin: 0 auto;
        height: 160px;
    }
    .father {
        width: 1000px;
        margin: 0 auto;
    }
    .father #bigPic {
        width: 1000px;
    }

这里是js代码

//    1 获取所有的a标签
    var　links = document.getElementsByTagName("a");
    var big = document.getElementById("bigPic");
//    2 注册事件
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function(){
            big.src = this.href;
            return false;
        }
    }