jQuery基础之jQuery和原生js实现tab选项卡和电影排行榜

相关知识点

$("li").mouseenter()和 $("li").mouseleave()与("li").hover()
$(this).addClass("current");//添加样式
$(".content>li").eq(index);//选择一个jQuery对象，还有一个get方法一样，不过get方法会返回一个节点，就不能用jQuery操作了
$li.removeClass("show");// 移除演示
$(this).siblings().removeClass("current");//选择除了自己之外的兄弟元素 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tab选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 440px;
            height: 298px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        .nav>li {
            list-style: none;
            width: 110px;
            height: 50px;
            background: orange;
            text-align: center;
            line-height: 50px;
            float: left;
        }

        .nav>.current {
            background: #ccc;
        }

        img {
            display: block;
            width: 440px
        }

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

        .content>.show {
            display: block;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        //第一种方法，但有缺陷，移出后所有样式都将消失
        // $(function() {
        //    // 1.监听选项卡的移入事件
        //    $(".nav>li").mouseenter(function () {
        //         // 1.1修改被移入选项卡的背景颜色
        //         $(this).addClass("current");
        //         // 1.2获取当前移入选项卡的索引
        //         var index = $(this).index();
        //         // 1.3根据索引找到对应的图片
        //         var li = $(".content>li").eq(index);
        //         // 1.4显示找到的图片
        //         li.addClass("show");

        //     });
        //     // 1.监听选项卡的移出事件
        //     $(".nav>li").mouseleave(function () {
        //         // 1.1还原选项卡的背景颜色
        //         $(this).removeClass("current");
        //         // 1.2获取当前移出选项卡的索引
        //         var index = $(this).index();
        //         // 1.3根据索引找到对应的图片
        //         var $li = $(".content>li").eq(index);
        //         // 1.4隐藏对应的图片
        //         $li.removeClass("show");
        //     });
        // })
        //第一种方法,正常
        // $(function() {
        //     // 1.监听选项卡的移入事件
        //     $(".nav>li").mouseenter(function() {
        //         // 1.1修改被移入选项卡的背景颜色
        //         $(this).addClass("current");
        //         // 1.2还原其它兄弟选项卡的背景颜色
        //         $(this).siblings().removeClass("current");
        //         // 1.3获取当前移出选项卡的索引
        //         var index = $(this).index();
        //         // 1.4根据索引找到对应的图片
        //         var $li = $(".content>li").eq(index);
        //         // 1.5隐藏非当前的其它图片
        //         $li.siblings().removeClass("show");
        //         // 1.6显示对应的图片
        //         $li.addClass("show");
        //     });

        // })

        //使用原生js
        window.onload = function() {
            var navLi = document.getElementsByClassName("nav")[0].getElementsByTagName('li');
            var contentLi = document.getElementsByClassName("content")[0].getElementsByTagName('li');
            for (var i = 0; i < navLi.length; i++) {
                navLi.index=i;
                navLi[i].onmouseenter = function() {
                    for (var i = 0; i < navLi.length; i++) {
                        navLi[i].className="";
                        this.className="current";
                    }
                    for (var i = 0; i < contentLi.length; i++) {
                        contentLi[i].className="";
                        contentLi[navLi.index].className="show"
                    }            
                    console.log(this.innerHTML);
                }
            }
        }
    </script>
</head>

<body>
    <div class="box">
        <ul class="nav">
            <li class="current">demo1</li>
            <li>demo2</li>
            <li>demo3</li>
            <li>demo4</li>
        </ul>
        <ul class="content">
            <li class="show"><img src="img/demo (6).png" alt="" srcset=""></li>
            <li><img src="img/demo (7).png" alt="" srcset=""></li>
            <li><img src="img/demo (8).png" alt="" srcset=""></li>
            <li><img src="img/demo (9).png" alt="" srcset=""></li>
        </ul>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>电影排行榜</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 300px;
        height: 500px;
        margin: 50px auto;
        border: 1px solid #000;
    }

    .box>h1 {
        font-size: 20px;
        padding-left: 10px;
    }

    .content>img {
        width: 80px;
        height: 120px;
        float: left;
        overflow: hidden;
    }

    .content>p {
        width: 180px;
        height: 120px;
        float: left;
        margin-left: 10px;
        font-size: 12px;
        line-height: 20px;
    }

    .content {
        overflow: hidden;
        margin-top: 5px;
        display: none;
    }

    li {
        list-style: none;
        padding: 5px 10px;
        border: 1px dashed #ccc;
        cursor: pointer;
    }

    .box span {
        margin-right: 5px;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        background: #ccc;
    }

    ul>li:nth-child(-n+3) span {
        background: deeppink;
    }

    .current .content {
        display: block;
    }
</style>
<script src="js/jquery-1.12.4.js"></script>
<script>
    //使用jQuery方式
    $(function() {
        //方法一
        // 1.监听li的移入事件
        // $("li").mouseenter(function() {
        //     $(this).addClass("current");
        // })
        // // 1.监听li的移出事件
        // $("li").mouseleave(function() {
        //     $(this).removeClass("current")
        // })

        //方法二
        // $("li").hover(function() {
        //     $(this).addClass("current")
        // }, function() {
        //     $(this).removeClass("current")
        // })

        //方法三,只是会留下当前所对应的内容不会消失，这是和上面的区别
        // $("li").mouseenter(function() {
        //     $(this).addClass("current");
        //     $(this).siblings().removeClass("current")
        // })
    })

    //使用原生js
    window.onload = function() {
        var oLi = document.getElementsByClassName("box")[0].getElementsByTagName('li');
        //方法一
        // for (var i = 0; i < oLi.length; i++) {
        //     oLi[i].onmouseenter = function() {
        //         this.className = "current";
        //     }
        //     oLi[i].onmouseleave = function() {
        //         this.className = "";
        //     }
        // }

        //方法二，只是会留下当前所对应的内容不会消失，这是和上面的区别
        for (var i = 0; i < oLi.length; i++) {
            oLi[i].index = i;
            oLi[i].onmouseenter = function() {
                this.className = "current";
                console.log(siblingsOf(oLi[this.index]));//(5) [li, li, li, li, li]
                //除当前元素外全部隐藏
                for(var n=0;n< siblingsOf(oLi[this.index]).length;n++){
                    siblingsOf(oLi[this.index])[n].className="";
                }
            }
        }
        //函数为 获的除自身之外的所有兄弟节点
        function siblingsOf(elem) {
            var len = 0;
            var children = elem.parentNode.childNodes; //获取目标元素的所有兄弟元素和它自身
            var siblings = new Array();
            for (var i = 0, len = children.length; i < len; i++) {
                //判断此元素是一个元素节点而且不是调用元素的本身
                //若为真放进数组里面
                if (children[i] != elem) {
                    siblings.push(children[i]);
                }
            }
            //返回最后得出的结果数组
            return siblings;
        }
    }
</script>

<body>
    <div class="box">
        <h1>电影排行榜</h1>
        <ul>
            <li><span>1</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
            <li><span>2</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
            <li><span>3</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
            <li><span>4</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
            <li><span>5</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
            <li><span>6</span>demo
                <div class="content">
                    <img src="img/demo (1).png" alt="">
                    <p>简介：故事发生在非洲附近的大海上，主人公冷锋（吴京 饰）遭遇人生滑铁卢，被“开除军籍”，本想漂泊一生的他，正当他打算这么做的时候，一场突如其来的意外打破了他的计划，突然被卷入了一场</p>

                </div>
            </li>
        </ul>
    </div>
</body>

</html>
posted @   coderwcb  阅读(104)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery基础（jQuery概念，jQuery与js入口函数的区别及其入口函数的其他写法和冲突问题）
· jQuery基础之操作属性或文本及其样式 位置 尺寸的方法（重点，常用）
· jQuery入门
· jquery学习
· jQuery从入门到精通
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示