jQuery实现TAB栏，焦点图

最新推荐文章于 2022-02-25 11:00:48 发布

zeddme

最新推荐文章于 2022-02-25 11:00:48 发布

阅读量147

点赞数

分类专栏： js 文章标签： jquery css html

本文链接：https://blog.csdn.net/qq_44888570/article/details/109186884

版权

js 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

Tab栏样式是比较常见的样式，掌握还是挺好的，很简单。

效果图

Tab栏：
在这里插入图片描述
焦点图：

本例比较重要的是排他思想，干掉其他人的，留下自己的。请在案例中自行体会吧，你会知道为啥要排他的。
PS：这里笔者只放了Tab栏的源码，因为焦点图的源码与它相差不大，会一个就行。如果有想要焦点图的童靴，可以留言或者私信~

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TAB栏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tablist {
            width: 400px;
            height: 350px;
            border: 1px solid #000;
            margin: 200px auto;
        }

        .tablist .nav {
            list-style: none;
            height: 50px;
            background-color: rgba(229, 185, 102, 0.99);
            overflow: hidden;
        }

        .tablist .nav > li {
            float: left;
            width: 66.6px;
            line-height: 50px;
            text-align: center;
        }

        .imgs > li {
            list-style: none;
            display: none;
        }

        .imgs > li img {
            width: 400px;
            height: 300px;
        }

        .current {
            background-color: #eeeeee;
        }

        .imgs > .show {
            display: block;
        }

    </style>
    <script src="js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            var nav = $('.nav>li');
            var imgs = $('.imgs>li')
            nav.mouseenter(function () {
                $(this).addClass('current');//这里填写类名不要加.
                $(this).siblings().removeClass('current');//经典排他思想
                var index = $(this).index();
                imgs.eq(index).addClass('show');
                imgs.eq(index).siblings().removeClass('show');
            });
        });
    </script>
</head>
<body>
<div class="tablist">
    <ul class="nav">
        <li class="current">老婆1</li>
        <li>老婆2</li>
        <li>老婆3</li>
        <li>老婆4</li>
        <li>老婆5</li>
        <li>老婆6</li>
    </ul>
    <ul class="imgs">
        <li class="show"><img src="img/tabl/Ebrsuz4XQAcHWoM.jpg"/></li>
        <li><img src="img/tabl/EdsvmEqWoAI4nsp.jpg"/></li>
        <li><img src="img/tabl/EdYPLyIXsAE0qHa.jpg"/></li>
        <li><img src="img/tabl/EeQqkc4WoAgdnfB.jpg"/></li>
        <li><img src="img/tabl/wallhaven-139z5g.jpg"/></li>
        <li><img src="img/tabl/wallhaven-dgl7rm.jpg"/></li>
    </ul>
</div>
</body>
</html>

zeddme

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现TAB栏，焦点图

Tab栏样式是比较常见的样式，掌握还是挺好的，很简单。效果图Tab栏：焦点图：本例比较重要的是排他思想，干掉其他人的，留下自己的。请在案例中自行体会吧，你会知道为啥要排他的。PS：这里笔者只放了Tab栏的源码，因为焦点图的源码与它相差不大，会一个就行。如果有想要焦点图的童靴，可以留言或者私信~源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫