2016-09-23 4 views
0

私はカテゴリーのショートコードを使用して最近の投稿を表示するWPブログページを持っています そのページに、私は自分の投稿につながるリンクのリストを持っています。 リンクを編集してIDやクラスを追加することはできません。そのため、divを使用してdivを手動で使用しています。クリックするとリンクが新しいタブに表示されるjavascriptがあります。新しいタブへのリンクはワンクリックで開く? (私はEDIT THE LINKSを傾けることを覚えておいてください)。ここ はJAVASCRIPTすべての部門を自動クリックする部門ID

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

のITSを彼らの新しいタブにすべてのリンクをロードしようとしています

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

私のコードです働いていない、助けてくださいPLS?

+0

ボス機能は次のようになりいただきましたか? – Kilmazing

答えて

0

Fullcode例:jQueryを使って簡単だろう

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

が機能していない場合、onclickは実行を実行しませんでした。 – Reuben

+0

関数openNewTab()は機能していませんか?try-> catchで何らかのエラーが発生しましたか? – toto

+0

divはクリック可能ではなく、ホバーしているときに注目に値する...このplsの実例を表示できますか? – Reuben

0

.each().attr()を使用して実現できます。

注: あなたのワードプレスでこのスクリプトを試してみてください。下の出力は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>

グッドラック:)