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>

它没有工作，有什么帮助？

Answer 1

Fullcode示例：

<!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 个答案: