其他分享
首页 > 其他分享> > jq-手风琴/-jq-淘宝精品显示/-jq-TAB栏目切换

jq-手风琴/-jq-淘宝精品显示/-jq-TAB栏目切换

作者：互联网

01-jq-手风琴

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        ul {
            list-style-type: none;
        }

        .parentWrap {
            width: 200px;
            text-align: center;
        }

        .menuGroup {
            border: 1px solid #999;
            background-color: #e0ecff;
        }

        .groupTitle {
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
        }

        .menuGroup>div {
            height: 200px;
            background-color: #fff;
            display: none;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>

    <script>
        // 入口
        $(function () {

            // 1. 获取所有的span，给所有的span提供点击事件：click(回调函数)
            $('.groupTitle').click(function () {
                // this是什么？DOM元素
                // console.log(this)
                // 原生变jq对象：$(this)


                // 2. span对应的div显示：span的下一个兄弟；其他的div要隐藏
                // $(this).next().css('display', 'block')

                // // 找到span的爸爸
                // $(this).parent().siblings().children('div').css('display', 'none')

                // 动画效果：slideDown()
                $(this)
                    .next()             // 下一个兄弟：div
                    .slideToggle()      // 收起来或者展开：当前div
                    .parent()
                    .siblings()
                    .children('div')
                    .slideUp()

                // slide是一组高度变化的动画效果
                // slideUp()：收起来，高度变0（display：none)
                // slideDown()：展开，高度变成目标高度（display:block）
                // slideToggle()：toggle是切换的意思，如果原来是收起来，就展开；原来是展开的就收起来
            })

        })
    </script>
</body>

</html>

示例：
在这里插入图片描述



02-jq-淘宝精品显示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .wrapper {
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }

        #left,
        #center,
        #right {
            float: left;
        }

        #left li,
        #right li {
            background: url(images/lili.jpg) repeat-x;
        }

        #left li a,
        #right li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }

        #left li a:hover,
        #right li a:hover {
            background-image: url(images/abg.gif);
        }

        #center {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <ul id="center">
            <li><a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/女包.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/男靴.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/皮带.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/围巾.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250" /></a></li>
            <li><a href="#"><img src="images/男包.jpg" width="200" height="250" /></a></li>
        </ul>
        <ul id="right">
            <li><a href="#">女包</a></li>
            <li><a href="#">男靴</a></li>
            <li><a href="#">登山鞋</a></li>
            <li><a href="#">皮带</a></li>
            <li><a href="#">围巾</a></li>
            <li><a href="#">皮衣</a></li>
            <li><a href="#">男毛衣</a></li>
            <li><a href="#">男棉服</a></li>
            <li><a href="#">男包</a></li>
        </ul>
    </div>

    <script>
        // 入口
        $(function () {
            // 1. 获取所有左侧的li，中间的li，右侧的li
            let $left = $('#left li')
            // 自己的数量：length
            console.log($left.length)
            let $center = $('#center li')
            // console.log($left, $center)
            let $right = $('#right li')
            // 2. 给所有的左侧的li增加鼠标移入事件：mouseover()
            $left.mouseover(function () {
                // console.log($(this))
                // 2.1 拿到当前被移入的li的下标：$(this).index()
                let index = $(this).index()
                // 2.2 让中间li对应的显示，其他的隐藏
                $center.eq(index).show().siblings().hide()
            })

            // 3. 右侧菜单添加鼠标移入事件
            $right.mouseover(function () {
                // 3.1 获取当前右侧的index + 左侧的菜单数量
                // 3.2 当前中间对应的显示，其他的隐藏   
                $center.eq($(this).index() + $left.length).show().siblings().hide()
            })

        })
    </script>
</body>

</html>

示例：
在这里插入图片描述



03-jq-TAB栏切换

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid rgb(35, 177, 13);
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            // 1. 获取所有li和所有的div.main
            const $lis = $('.tab-item')
            const $div = $('.main')
            // 2. 给所有li增加鼠标移入输入：mouseover
            $lis.mouseover(function () {
                // 3. 事件处理
                // 3.1 li的排他：解决active类的问题
                $(this).addClass('active').siblings().removeClass('active')
                // 3.2 div的排他：解决selected类的问题
                $div.eq($(this).index()).addClass('selected').siblings().removeClass('selected')
            })

        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
                <a href="###"><img src="images/guojidapai.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/guozhuangmingpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/qingjieyongpin.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="images/nanshijingpin.jpg" alt="" /></a>
            </div>
        </div>
    </div>


</body>

</html>

示例：
在这里插入图片描述

标签：center,jq,height,TAB,手风琴,li,border,div,left
来源： https://blog.csdn.net/miaopasi_poi/article/details/116461382