Question

我在我的HTML中使用WordPress短代码创建了一些链接。不幸的是，这个短代码不包含目标属性，这样我就无法在新选项卡中打开链接。

我不是程序员，我正在寻找一个小JS来在一个新标签中打开特定类下的一些链接。

类似的东西：

if ("a" tag is under "div.newTab" class) onClick {window.open in a new tab}

希望你们理解它！

谢谢大家。

Answer 1

您可以通过循环指定类下的所有链接来设置target属性。

Demo

＆＃13;

(function(){

	$(".newTab a").each(function(i, obj){
  
  	obj.setAttribute("target", "_blank");
 
  });
	
})();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="newTab">
  <a href="https://bhansa.github.io">bhansa</a>
  <a href="http://google.com">Google</a>
</div>

＆＃13;

Answer 2

window.onload = function()
{
    var allLinks = document.querySelectorAll("div.newTab a");
    for(var i=0;i<allLinks.length;i++)
    {
        var currentLink = allLinks[i];
        currentLink.setAttribute("target","_blank");
    }
}

Answer 3

如果你想避免操纵页面上的很多链接，可以使用jQuery来捕获.newTab div中链接的点击并对它们进行操作。

示例HTML

<div class="someClass">
    <a href="http://google.com">Google</a>
</div>

<div class="newTab">
    <a href="http://wikipedia.org">Wikipedia</a>
</div>

的javascript

$( document ).ready( function( $ ) {
    $( '.newTab a' ).click( function( event ){
        event.preventDefault();
        window.open(( this ).href, '_blank');
    });
});

工作jsFiddle

Answer 4

$(document).on('click', 'div.newTab a', function(e){ 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    window.open(url, '_blank');
});

Answer 5

如果您使用的是WordPress，我创建了一个插件，可以执行此操作以及更多操作，而无需知道如何编写任何代码。您需要做的就是在新标签中添加要打开的链接的选择器，然后选择“在新标签中使用此选择器打开所有链接”。从出现的下拉菜单中。

Click here to view a gif that demonstrates this

您可以get the free version from the WordPress.org Plugin repository进行尝试。

如果您需要能够使用多个选择器执行操作或使用选择器执行多项操作，则需要Pro版本。它使您可以添加无限数量的选择器，并选择与每个选择器无关的事情。如果您有兴趣，可以从WPDevPowers.com购买。

按类获取元素并在新选项卡中打开它

5 个答案: