javascript - Angular 2更改className更改类名称，然后将其删除

Question

我正在尝试切换获得点击的组件的类名称。

  toggleActive(event) {
        const parentClass = event.target.parentElement
        debugger
        if (parentClass.className === 'active') {
            if (parentClass.previousElementSibling === null) {
                parentClass.nextElementSibling.className = 'active'
            } else {
                parentClass.previousElementSibling.className = 'active'
            }
            parentClass.className = ''
        } else {
            if (parentClass.previousElementSibling === null) {
                parentClass.nextElementSibling.className = ''
            } else {
                parentClass.previousElementSibling.className = ''
            }
            parentClass.className = 'active'
        }
    }

<ul class="nav nav-tabs">
    <li (click)="toggleActive($event)">
        <a href="#/detail/bopis/default/search/advanceSearch">Pick Up In Store</a>
    </li>
    <li (click)="toggleActive($event)"><a href="#/advanceSearch?BOSFS">Ship From Store</a></li>
</ul>

我第一次点击<li>它会切换得很好。然后，除非我刷新页面，否则需要单击两次才能更改类别。当我单步执行调试器时，一切似乎都正常，然后它只是重置为 className = ""

我感谢任何帮助或更好的方法来做到这一点。

Answer 1

您需要防止 anchor 标记的默认点击事件，这就是您需要的原因

return false;

在函数的末尾。