自动单击Div ID中的所有链接-Java 学习之路

我有一个WP博客页面，显示使用类别短代码的最近帖子在该页面上，我有一个链接列表，通向他们的帖子 . 我无法编辑链接以向其添加ID或类，因此我手动使用div来包装短代码和javascript，这使得链接在单击时打开到新选项卡，有没有办法可以打开所有链接到新标签打开单击？（记住，我无法编辑链接）这是我的代码

<!--- i cant edit the links below ----->

<div id="boss" class="boss">
<a href="http://example.com/example-1" title="Example 1">Example 1</a>
<a href="http://example.com/example-1" title="Example 1">Example 2</a>
 <a href="http://example.com/example-1" title="Example 1">Example 3</a>
<a href="http://example.com/example-1" title="Example 1">Example 4</a>
</div>

JAVASCRIPT

<script type="text/javascript">
 window.onload = function(){
    var a = document.getElementById('boss').getElementsByTagName('a');
    for (var i=0; i<a.length; i++){
        a[i].setAttribute('target', '_blank');
        }
  }
</script>

我试图在点击时加载所有链接到他们的新标签

<div onclick="boss();">Something To Click On</div>

它不工作，任何帮助PLS？

2 回答

全码示例：

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <script type="text/javascript">

        function boss() {

            var a = document.getElementById('boss').getElementsByTagName('a');

            for (var i = 0; i < a.length; i++) {
                a[i].setAttribute('target', '_blank');
                openNewTab(a[i], "click");

            }
        }

        function openNewTab(obj, evtName) {

            try {
                if (obj.dispatchEvent !== null && obj.dispatchEvent !== undefined) {
                    //var event = new Event(evtName);
                    var event = document.createEvent("MouseEvents");
                    event.initMouseEvent(evtName, true, true, window,
                            0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    obj.dispatchEvent(event);
                } else if (obj.fireEvent !== null && obj.fireEvent !== undefined) {
                    event = document.createEventObject();
                    event.button = 1;
                    obj.fireEvent("on" + evtName, event);
                    obj.fireEvent(evtName);
                } else {
                    obj[evtName]();
                }
            } catch (e) {
                alert(e);
        }
    }
    </script>
    </head>

    <body>
        <div onclick="boss();">Something To Click On</div>
        <div id="boss">
            <a href="http://example.com/example-1" title="Example 1">Example 1</a>
            <a href="http://example.com/example-2" title="Example 1">Example 2</a>
            <a href="http://example.com/example-3" title="Example 1">Example 3</a>
            <a href="http://example.com/example-4" title="Example 1">Example 4</a>
        </div>
    </body>


</html>

回复于 2024-04-20T00:22:59+08:00

使用jQuery会很容易 . 您可以使用 .each() 和 .attr() 来实现它 .

NOTE 在WordPress中尝试此脚本 . 由于以下输出是iframe，它将无法正常工作！

$ = jQuery;
$(document).ready(function(){
  $("#boss > a").each(function(){
    $(this).attr("target","_blank");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="boss" class="boss">
<a href="http://example.com/example-1" title="Example 1">Example 1</a>
<a href="http://example.com/example-1" title="Example 1">Example 2</a>
 <a href="http://example.com/example-1" title="Example 1">Example 3</a>
<a href="http://example.com/example-1" title="Example 1">Example 4</a>
</div>

祝好运：）

回复于 2024-04-20T00:22:59+08:00

自动单击Div ID中的所有链接

2 回答

相关问题