Question

我在网页上有以下代码，由于某些原因我不知道它不起作用，我有2种方法尝试更改spans类属性但它不起作用，有人请指向我所在的位置出错了？：）

<script language="javascript">
    function ChangeClass()
    {
        alert("Clicked!");
        document.getElementById("Search").className = "non-activeTab";
        alert("Changed class!");
        //does not work
    }

    window.onload = function()
    {
        document.getElementById("Search").addEventListener('click' , ChangeClass );
        var elm = document.getElementById("Search").className;
        alert("LOADED PAGE " + elm);
        //this works
    }
    function someFunction(abc,elm) {
        alert(abc + "/" + elm);
        //does not work
    }
</script>

<div class="tabs" id="tabs">
    <div class="tabOutline" id="outline" >
        <span class="activeTab" id="Search" onclick="someFunction('two',this.className)">
            Search
        </span>
    </div>
</div>

Answer 1

您的代码有效，但不是您预期的方式。似乎onclick首先执行，这意味着它会在更改之前显示className 。它实际上确实发生了变化，但在再次点击之前你没有看到它。

这是一个很好的例子，说明为什么在同一个上下文中同时使用eventlistener和onclick属性是个坏主意。执行顺序不明确。

要在更少的代码中实现相同的目标，您只需执行以下操作：

<span class="active" onclick="this.className='inactive'">...</span>

或：

<script>
  onload = function () {
    document.getElementById('search').addEventListener('click', function (e) {
      e.target.className = 'inactive';
    });
  };
</script>
<span id="search" class="active">...</span>

您可以使用CSS轻松测试此类内容：

<style>
  .active { color: red; }
  .inactive { color: blue; }
</style>

更改Span类不起作用

1 个答案: