-1

我在网页中有以下代码，由于某种原因我不知道它不起作用，我有两种方法可以尝试更改 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>
4

1 回答 1

1

您的代码有效，但不是您所期望的方式。它似乎onclick首先执行，这意味着它会向您显示更改className 之前的内容。它确实发生了变化，但在再次单击之前您看不到它。

这是一个很好的例子，说明为什么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>
于 2013-09-14T12:34:59.790 回答