京东小练习

2021/11/8 23:40:33

编程Tag： function li index nav color span 京东练习

本文主要是介绍京东小练习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
</head>
<body>
<nav id="nav">
    <li><span></span><p>就东会员</p></li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {

        $("#nav li span").mouseover(function () {
            $(this).css("background-color","#c81623");
            var index =$("#nav li span").index(this);
            $("#nav li:eq("+index+") span~p").show();

        }).mouseout(function () {
            
            $(this).css("background-color","#7a6e6e");
            var index =$("#nav li span").index(this);
            $("#nav li:eq("+index+") span~p").hide();
        })


    })
</script>
</body>
</html>

这篇关于京东小练习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

京东小练习

相关编程文章