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

这里是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;
        }
    }

来源：CSDN

作者：oing

链接：https://blog.csdn.net/qq_30481605/article/details/71076520