[JS] 实现tab选项卡

编写思路

(1) 可以将无序表和图片容器分开, 无序表的 li 只用作为事件触发器

(2) 图片默认显示第一张, 实际上全部都已加载完, 除第一张外都隐藏

(3) 监听鼠标聚焦事件即可, 聚焦到哪个 li 上就把对应图片显示,
然后把其它图片隐藏

(4) li 标签的数量和 img 标签的数量一致, 因此匹配图片的时候,
可以用 li 的索引来对应 img 标签的索引

效果图示

html 结构代码

<body>
    <div id="theFirst">
        <ul>
            <li style="background-color: deepskyblue">
                <span>tab1</span>
            </li>
            <li>
                <span>tab2</span>
            </li>
            <li>
                <span>tab3</span>
            </li>
            <div id="theSecond">
                <img src="images/1.png" class="def" />
                <img src="images/2.png" class="def" style="display: none" />
                <img src="images/3.png" class="def" style="display: none" />
            </div>
        </ul>
    </div>
</body>

css 样式代码

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #theFirst {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 456px;
            height: 202px;
            border: black solid 1px;
        }

        ul {
            list-style: none;
        }

            ul li {
                float: left;
                background-color: aqua;
            }

                ul li span {
                    display: inline-block;
                    width: 150px;
                    height: 40px;
                    border: black solid 1px;
                }
            /*这里要清除浮动流, 不然div会被吞掉一部分*/
            ul div {
                width: 456px;
                height: 160px;
                clear: both;
            }
        /*图片大小要适配*/
        .def {
            width: 456px;
            height: 160px
        }
    </style>

js 代码

    <script src="scripts/jquery.min.js"></script>
    <script>
        $(function () {
            //事件委托给ul,挪动到每个li上后触发换图事件
            $('ul').on('mouseenter',
                'li',
                function () {
                    //li在被鼠标聚焦时颜色变深, 同时其他li的颜色保持不变, 默认显示第一张图片因此第一项默认深色
                    $(this).css('background-color', 'deepskyblue').siblings().css('background-color', 'aqua');
                    //除第一张图片外,其他图片默认不显示,切换显示时将目标以外的图片都不显示.
                    var li_index = $(this).index();
                    $('#theSecond img:eq(' + li_index + ')').css({
                        display: 'inline-block'
                    }).siblings().css({
                        display: 'none'
                    });
                });
        });
    </script>

来源：https://www.cnblogs.com/leon9dragon/p/12331248.html

标签

选项卡