Question

我的页面上有一些按钮，例如：

<a id="1" onclick="javascript:randje(1);"></a>
<a id="2" onclick="javascript:randje(2);"></a>

现在，我尝试制作一个脚本，以更改单击按钮的边框：

function randje(A) {
    document.getElementById(A).style.borderColor = "green";
}

这很好。但是我有一些可点击链接的列表，有时2个，有时5个甚至更多。现在，我想尝试更改单击的按钮的边框，并将上一次单击的边框设置回黑色。像这样的东西，但这还行不通。有人可以帮我吗？

function randje(A) {
    if ( B ) { document.getElementById(B).style.borderColor = "black" };
    document.getElementById(A).style.borderColor = "green";
    var B = A;
}

谢谢！

Answer 1

只需将声明移出函数即可。

var B;
function randje(A) {
    if(B){
      document.getElementById(B).style.borderColor  = "black"
    };
    document.getElementById(A).style.borderColor  = "green";
    B = A;
}

a {border-style: dotted;}

<a id="1" onclick="javascript:randje(1);">One</a>
<a id="2" onclick="javascript:randje(2);">Two</a>

Answer 2

这是另一个选择，假设您编写了多个链接。该解决方案基于jQuery，但也可以在普通JavaScript中实现。

<style>
  a.link { border: 3px solid black; display: inline-block; padding: 1em;}
  a.link.selected { border-color: green; }
</style>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>   
<a class="link">1</a>
<a class="link">2</a>
<a class="link">3</a>
 
<script>
  $('a.link').on('click', (e) => {
    $('a.link').removeClass('selected');
    $(e.currentTarget).addClass('selected');
  })
</script>

Javascript更改边框

2 个答案: