使用纯JavaScript

Question

JQuery代码非常简单：

$('.nav-menu').on('click','li', function(){
    $(this).addClass('selected').siblings().removeClass('selected');

点击它会将类selected添加到选定的.nav-menu元素，并从所有兄弟姐妹中删除该selected类。

使用纯JavaScript执行完全的最佳和最短路径？

可能重复是 Not a solution

我不只是要添加特定的类。但也要从元素的所有兄弟姐妹中删除同一个类。

相关HTML：

        <ul id="tabnav" class="nav-menu">
            <li class="tab selected"><a href="#">Element 1</a></li>
            <li class="tab"><a href="#">Element 2</a></li>
            <li class="tab"><a href="#">Element 3</a></li>
        </ul>

Answer 1

纯JavaScript？然后 JS 代码将为我看这个：

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className=el.className.replace(reg, ' ')
  }
}

Answer 2

现代浏览器添加了classList：

document.getElementById('id').classList.add('YourClass'); //add
document.getElementById('id').classList.remove('YourClass'); //remove

注意：IE＆lt; = 9或Safari＆lt; = 5.0

不支持