JQuery/tab切换2不加div的.html

<!Doctype html>
<html>
<meta charset="utf-8">

<head>
    <style>

    </style>
</head>
<!--<img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
<img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg" alt="和田玉">
<img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="金吊坠">-->
<style>
    ul {
        margin: 0px;
        padding: 0px;
    }
    
    li {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    
    .clearfix:after {
        content: '';
        display: block;
        clear: both;
    }
    
    .headnav {
        width: 200px;
        border: 1px solid black;
    }
    
    .headnav>ul>li {
        float: left;
        margin-left: 10px;
        /*border-right: 1px solid black;*/
        line-height: 24px;
        text-align: center;
        cursor: pointer;
    }
    /*.headnav>ul>li:hover {

    }*/
    
    .container-a,
    .container-b,
    .container-c {
        border: 1px solid black;
    }
    
    .container-a,
    .container-b,
    .container-c {
        width: 436px;
        /*margin-top: 20px;*/
    }
    
    .container-b,
    .container-c {
        display: none;
    }
    /*.container li:hover {
        background: #ccc;
        opacity: .5;
        position: relative;
        z-index: 2;
    }*/
    
    .container img:hover {
        background: #ccc;
        opacity: .5;
        position: relative;
        z-index: -2;
        /*visibility: hidden*/
    }
    
    .container-a>ul>li,
    .container-b>ul>li,
    .container-c>ul>li {
        position: relative;
        border: 1px solid black;
        float: left;
        margin-left: 20px;
        margin-bottom: 10px;
    }
    
    .container-a>ul,
    .container-b>ul,
    .container-c>ul {
        margin-left: -20px;
        margin-bottom: -10px;
    }
    /*.clearfix div {
        visibility: hidden ;
        visibility: visible;
        display: none;
        width: 132px;
        height: 132px;
        background:#ccc;
        position: absolute;
        z-index: 2
    }*/
    /*.active {
        visibility: visible;
        visibility: hidden ;
        display: block;
        opacity: .7;
        background: #111;
    }*/
</style>

<body>
    <div class="headnav">
        <ul class="headnavul clearfix">
            <li>热门</li>
            <li>珠宝首饰</li>
            <li>奢侈品</li>
        </ul>
    </div>
    <div class="container">
        <div class="container-a clearfix">
            <ul class="clearfix">
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
            </ul>
        </div>
        <div class="container-b clearfix">
            <ul class="clearfix">
                <li>

                    <img src="http://img12.360buyimg.com/N3/jfs/t2302/181/1562193880/220016/88a978ef/56cbbc11Nd6d3b04b.jpg" alt="和田玉">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
            </ul>
        </div>
        <div class="container-c clearfix">
            <ul class="clearfix">
                <li>

                    <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="金吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img13.360buyimg.com/N3/jfs/t2461/336/2166939566/101221/3af27699/56c426a5N9b6673f4.jpg" alt="金吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
                <li>

                    <img src="http://img10.360buyimg.com/N3/jfs/t1360/330/897475737/123557/23624706/55b05e25N13d4ec5e.jpg" alt="吊坠">
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./jquery-3.2.1.js"></script>
<script>
    var $headnav = $('.headnav')
    var $container = $('.container')
    $headnav.on('click', 'li', function () {
        var text = $(this).text();
        // console.log(text);
        $('.container>div').each(function () {
            // console.log(1);
            $(this).css('display', 'none')
            if (text == '热门') {
                $('.container-a').css('display', 'block')
            } else {
                if (text == '珠宝首饰') {
                    $('.container-b').css('display', 'block')
                } else {
                    if (text == '奢侈品') {
                        $('.container-c').css('display', 'block')
                    }
                }
            }
        })

    })
    //--------------------------在HTML中设置div作为遮罩的。等等再写一个不在html中使用div作为遮罩的，直接是使用createDocumentFragment来设置。
    // var div = $('<div style="width:132px;height:132px;position: absolute;opacity: .4;background: #111;visibility: visible;"><button style="position: absolute ;cursor: pointer;width: 70px;height: 40px;left: 50%;top: 50%;margin-left: -35px;margin-top: -20px;font-size: 8px;">立即抢购</button></div>')
    // // console.log(1);
    // var docfrag = document.createDocumentFragment();  太麻瓜了，使用fragment,JQuery可以直接添加元素。
    // $(docfrag).append(div);
    // $(e.target).append(docfrag);
    // console.log($(e.target))
    // $('.container .clearfix>li').append(docfrag) //定位失败，后面要加margin-top: 132px;才可以，具体原因很奇怪（其定位是以本demo中的li进行定位的）。所以改用prepend方法
    //---------------------------------------------
    var div = $('<div style="width:132px;height:132px;position: absolute;opacity: .4;background: #111;display:none"><button style="position: absolute ;cursor: pointer;width: 70px;height: 40px;left: 50%;top: 50%;margin-left: -35px;margin-top: -20px;font-size: 8px;">立即抢购</button></div>')
    $('.container .clearfix>li').prepend(div)
    $('.container .clearfix').on('mouseenter', 'li', function () {
        // var div = $('<div style="width:132px;height:132px;position: absolute;opacity: .4;background: #111;display:none"><button style="position: absolute ;cursor: pointer;width: 70px;height: 40px;left: 50%;top: 50%;margin-left: -35px;margin-top: -20px;font-size: 8px;">立即抢购</button></div>')
        // $('.container .clearfix>li').prepend(div)
        // $('.container .clearfix>li')[0].innerHTML=div[0]
        // console.log(this);
        // if ($(this)) { }
        $(this).children('div').css('display', 'block')
        // console.log($('ul.clearfix div'));
        // console.log($(this).children('div'));
        // $(this).children('div').css('style', 'visibility:visible')
    })

    // --------------清除遮罩----------------------
    $('.clearfix').on('mouseleave', 'div', function () {
        // console.log(2);
        // console.log(this) //因为在on函数中给div绑定事件
        // $(this).removeClass();
        // $(this).removeAttr();

        // $(this).empty();
        // $(this).remove();  //不能使用，因为注入的div是一次性的，当删掉之后的话，
        // 上面的$('.container .clearfix').on('mouseenter', 'li', function () {}并没有div进行执行了
        $(this).css('display', 'none');
    })
    //刚刚在查jquery的文档的时候，看见了hover（）方法，试试看。

</script>

</html>