选项卡切换效果，点击切换图片

太过爱你忘了你带给我的痛 2022-04-06 05:41 284阅读 0赞

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。

##### 1、html结构布局： #####

<div id="box">
        <div class="img">
            <ul>
                <li class="active"><img src="img/1.jpg" /></li>
                <li><img src="img/2.jpg" /></li>
                <li><img src="img/3.jpg" /></li>
                <li><img src="img/4.jpg" /></li>
            </ul>
            <p><span id="index">1</span>/4</p>
        </div>
        <div class="btn">
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>

##### 2、css布局样式： #####

<style>
      *{
         margin:0; padding:0; font-family:"Microsoft yahei",serif;}
        li{
         list-style-type: none;}
        #box{
        
            position: relative;
            width: 350px;
            height: 580px;
            margin: 50px auto;
        }
        #box .img{
        
            position: absolute;
            top: 0;
            left: 0;
            width: 326px;
            height: 580px;
        }
        #box .img li{
        
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #box .img li.active{
        
            display: block;
        }
        #box .img li img{
        
            display: block;
        }
        #box .img p{
        
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 35px;
            text-align: center;
            background: rgba(0,0,0,.5);
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            line-height: 35px;
        }
        #box .btn{
        
            position: absolute;
            top: 0;
            right: 0;
        }
        #box .btn ul li{
        
            width: 24px;
            height: 24px;
            margin-bottom: 10px;
            line-height: 24px;
            color: #fff;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
            background: #000;
            cursor: pointer;
        }
        #box .btn ul li.active{
        
            background: #f60;
        }
    </style>

##### 3、js行为实现： #####

<script>
    
        var aBtn = document.getElementsByClassName("btn")[0].getElementsByTagName("li"),
            aImg = document.getElementsByClassName("img")[0].getElementsByTagName("li"),
            oTxt = document.getElementById("index"),
            length = aBtn.length,
            index = 0;//这个变量用来存储当前显示的序号
    
        for (var i = 0; i < length; i++)
        {
        
            aBtn[i].goudan = i;//自定义属性，用来存每个人的序号
            aBtn[i].onclick = function () {
        
                if ( this.goudan !== index ){
        
                    aBtn[index].className = "";//把前一个的名字去掉
                    aImg[index].className = "";//把前一图片的名字去掉
    
                    index = this.goudan;//把序号变成当前点击的这个的序号
    
                    aBtn[index].className = "active";//给点击的这个加名字
                    aImg[index].className = "active";//给当前要显示的图片加名字
    
                    oTxt.innerHTML = index+1;
                }
            };
        }
    
    </script>

##### 3、实现效果： #####

![在这里插入图片描述][20181208150928203.gif]

[20181208150928203.gif]: /images/20220406/d307ce655bbb4cd1a9c789edb22ab2ac.png

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关选项卡切换

一个选项卡，意思就是切换选项，一个最简单的列子，爱玩手机和电脑的肯定用过，选项卡和滚动条我觉得是差不多一个意思，当然只是差不多，并不绝对。因为两者都是屏幕高度不够，而设计出

ゞ浴缸里的玫瑰/ 2023年01月09日 03:51/ 0 赞/ 131 阅读

相关 vue 选项卡切换

vue 初学者选项卡切换效果： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 156 阅读

相关 js 选项卡切换

通过按钮来切换div 先将div隐藏，只显示第一个按钮为高亮，将div隐藏显示第一个div 通过js给按钮设置事件，通过点击的是哪一个按钮来设置其可见和高亮 <!

淩亂°似流年/ 2022年06月15日 12:55/ 0 赞/ 206 阅读

相关 Tab切换选项卡

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tab切换选项卡

左手的ㄟ右手/ 2022年05月09日 06:58/ 0 赞/ 236 阅读

相关纯JS实现tab选项卡切换效果

今天学到的用js写选项卡，有高亮效果，废话不多说，直接上代码吧！！！注意事项：css代码中有一个隐藏其他div的属性， display: none;这个一定要注意，要不

秒速五厘米/ 2022年04月08日 13:53/ 0 赞/ 294 阅读

相关选项卡切换效果，点击切换图片

今天分享一篇前端开发实战当中经常使用到的选项卡切换效果的文章，希望对您有所帮助，欢迎留言探讨。 1、html结构布局： <div id="box">

太过爱你忘了你带给我的痛/ 2022年04月06日 05:41/ 0 赞/ 285 阅读

相关 vue element tabs 点击链接切换选项卡

一、业务需求工作中，用到element UI的el-tabs组件，tabs里面有几个<el-tab-pane>现在需要在第一个<el-tab-pane>内容中点击某个

古城微笑少年丶/ 2022年03月17日 06:06/ 0 赞/ 921 阅读

相关 tab切换选项卡

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c

ゝ一纸荒年。/ 2022年02月02日 00:45/ 0 赞/ 333 阅读

相关 js点击切换图片

<style type="text/css"> { margin: 0; padding: 0; }

港控/mmm°/ 2022年01月14日 09:41/ 0 赞/ 346 阅读

相关 tab页选项卡切换效果

效果图 ![20190625151915714.png][] html页面结构 <div class="tabbox" id="clicktab">

た入场券/ 2022年01月07日 06:43/ 0 赞/ 357 阅读