京东小练习

最新推荐文章于 2023-03-28 20:27:14 发布

小于尧啊

最新推荐文章于 2023-03-28 20:27:14 发布

阅读量79

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/littleyyp/article/details/121218827

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这是一个关于京东首页右侧导航栏的JavaScript实现案例。当鼠标悬停在导航项的图标上时，对应的文本会显示，离开时文本隐藏。代码使用了jQuery库，通过CSS改变背景颜色并控制文本的显示与隐藏，展示了前端交互的基本技巧。

摘要由CSDN通过智能技术生成

<!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>

小于尧啊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
京东小练习

<!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.
复制链接

扫一扫

专栏目录