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

Question

我有一个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吗？

Answer 1

完整代码示例：

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

Answer 2

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

注意在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>

祝好运：）

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

问题描述

2 个解决方案

解决方案1
0 2016-09-23 18:00:37

解决方案2
0 2016-09-24 20:42:37

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

问题描述

2 个解决方案

解决方案1 0 2016-09-23 18:00:37

解决方案2 0 2016-09-24 20:42:37

解决方案1
0 2016-09-23 18:00:37

解决方案2
0 2016-09-24 20:42:37