点击li里的隐藏超链接，将ul里的li隐藏

最新推荐文章于 2022-06-18 17:36:47 发布

pinkowonote

最新推荐文章于 2022-06-18 17:36:47 发布

阅读量523

点赞数 1

分类专栏： Javascript

本文链接：https://blog.youkuaiyun.com/pinkowonote/article/details/107749730

版权

Javascript 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何通过JavaScript实现点击列表项中的隐藏超链接，来动态隐藏列表中的其他项。通过交互设计，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 点击li里的隐藏超链接，将ul里的li隐藏
1. 使用for获取ul的子节点，当点击隐藏按钮时，li消失
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            var oUl = document.getElementById("Ul");
            var aA = oUl.getElementsByTagName("a");

            for (var i = 0; i < aA.length; i++) {
                aA[i].onclick = function () {
                    this.parentNode.style.display = "none";
                }
            }
        }
    </script>
</head>

<body>
    <ul id="Ul">
        <li>dfgf<a href="javascript:;" id="1">隐藏</a></li>
        <li>gjkfukfuk<a href="javascript:;" id="2">隐藏</a></li>
        <li>ghjfghjghgfhjghjgh<a href="javascript:;">隐藏</a></li>
        <li>xfgxhgfhg<a href="javascript:;">隐藏</a></li>
        <li>fhjdfhjhf<a href="javascript:;">隐藏</a></li>
    </ul>
</body>

</html>