jquery实现单机li标签时，执行跳转，li标签下面的a标签路径

最新推荐文章于 2022-03-19 21:05:41 发布

原创最新推荐文章于 2022-03-19 21:05:41 发布 · 8.8k 阅读

9 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery简化网页元素交互的方法。通过单击`li`标签，可以触发页面跳转到对应的链接。文章详细展示了如何引入jQuery库，并提供了一个具体的实现示例。

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

思路：

这是一个触发事件，li标签被单击时，触发click方法，方法会获取到a标签的路径，进行页面跳转。

沿着这个思路去完成。

1、引入jquery

<script src="http://code.jquery.com/jquery-latest.js"></script>

2、实现

<ul>
    <li>点击这里也可以<a href="http://bird.so">bird</a></li>
    <li><a href="https://www.baidu.com/">百度搜索</a></li>
    <li><a href="https://www.so.com/">360搜索</a></li>
</ul>


<script>
    $(function(){
        /* 单机li进行页面跳转 */
        $("ul li").click(function(){
            /*当前标签下的a标签*/
            var obj = $(this).children("a");
            /*获取第一个a标签，进行跳转*/
            window.location.href=$(obj[0]).attr("href");
        });
    })
</script>