Question

我正在使用WordPress主题，这是我想要实现的功能：

<a href="tel:225-1077">225-1077</a>

确实很容易用HTML完成，但我对WordPress真的不太好，我得到的这个主题有很多文件，很难找到我应该编辑的地方但主题允许你添加自定义JS所以我想知道上面的功能是否可以用JS完成。

非常感谢任何帮助！

Answer 1

非常简单，这是可能的，但这并不意味着它是一个好主意。移动电话的JS支持不一致，甚至不能一直启用，这意味着这些人永远不会看到你的链接。

使用JS创建链接很简单：

var cta = document.createElement('a');

cta.href = 'tel:12341234';
cta.setAttribute('class', 'my cta classes');
cta.appendChild(document.createTextNode('1234-1234'));

然后你需要把它放在页面上的某个地方。如果我们在具有特定类的地方<div>，我们可以使用：

这是我们的HTML

<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>

我们的JS插入链接应循环遍历这些元素，创建链接并插入它们：

var targets = document.getElementsByClassName('target-cta'),
    target, 
    i, 
    cta; // Call To Action

for (i = 0; i < targets.length; i++) {

    target = targets[i];
    cta = document.createElement('a');

    cta.href = 'tel:12341234';
    cta.setAttribute('class', 'my cta classes');
    cta.appendChild(document.createTextNode('1234-1234'));

    target.appendChild(cta);
};

＆＃13;

    var targets = document.getElementsByClassName('target-cta'),
        target, i, cta;

    for (i = 0; i < targets.length; i++) {

        target = targets[i];
        cta = document.createElement('a');

        cta.href = 'tel:12341234';
        cta.setAttribute('class', 'my cta classes');
        cta.appendChild(document.createTextNode('1234-1234'));

        target.appendChild(cta);
    };

＆＃13;

<div class="target-cta">This div should receive a link</div>
<div class=""> this one shouldn't </div>
<div class="target-cta"> should have one here </div>
<div class=""> ...though not here</div>
<div class="target-cta">and finally, one here:</div>

＆＃13;

如何用Javascript实现电话链接

1 个答案: