Question

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

＆＃13;

  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'
        }
    }

＆＃13;

<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>

＆＃13;

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

我感谢任何帮助或更好的方法来做到这一点。我是棱角分明的新人。

谢谢

Answer 1

您需要阻止锚标记的默认点击事件，这就是您需要

的原因

return false;

在你的功能结束时。

Angular 2更改className会更改类名，然后将其删除

1 个答案: