js动态给多个div添加跳转方法

最新推荐文章于 2022-04-20 15:04:37 发布

Hello_Ray

最新推荐文章于 2022-04-20 15:04:37 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Hello_Ray/article/details/83615544

本文探讨了在静态页面中，a标签仅在直接点击文本时才触发跳转的问题，并提供了一种解决方案：通过给父级元素添加click事件并调用函数实现跳转，同时附带了JavaScript代码示例。

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

如下的静态页面中，a标签跳转。但是这里会出现一个问题，只有点击到a标签内容时候，
才能发生跳转行为。

<div class="container" id="container" style=" margin-bottom: 160px;">
<div class="container-list">
    <a href="widget.html" style="text-decoration: none">
        <span>widget</span>
        <span style="float: right; opacity: 1;">
        <img src="../img/Index_ico_arrow_right.png">
        </span>
    </a>
</div>
<div class="container-list">
    <a href="shortcutOperation.html" style="text-decoration: none">
        <span>快捷操作</span>
        <span style="float: right; opacity: 1;">
        <img src="../img/Index_ico_arrow_right.png" >
        </span>
    </a>
</div>
<div class="container-list">
    <a href="physicalButton.html" style="text-decoration: none">
        <span>物理按键</span>
        <span style="float: right; opacity: 1;">
        <img src="../img/Index_ico_arrow_right.png" >
        </span>
    </a>
</div>
</div>

目前我的解决方法是，给class="container-list"添加一个click事件。在html里面写死的函数跳转，内容量小可以的。但是如果要大代码量，会变得异常繁琐。

获取class="container-list"的列表，然后插入onclick函数。

window.onload = function () {
    var elements = document.getElementsByClassName("container-list");
    for(var i=0; i<elements.length; i++) {
        var obj = elements[i];
        obj.setAttribute("onclick", "sendUrl(this)");
    }
};

在当前页面中添加sendUrl函数就可以了

function sendUrl(obj) {
    try {
        var url = obj.getElementsByTagName("a")[0].href;
        if(url) {
            window.location.href = url;
        }
    } catch (ex) {
    }
}