javascript - 使用javascript单击div部分外部后如何删除文本样式？

Question

<style type='text/css'>
.active {
color: #000000;
text-decoration: underline;
}
</style>`
<div class="col-lg-12 col-md-12 pt-5">
            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a id="navLink" data-toggle="pill" href="#development" role="tab"
                       aria-controls="pills-home" aria-selected="true">Web Development</a>
                </li>
                <li class="nav-item">
                    <a id="navLink" data-toggle="pill" href="#appsgamedevelopment" role="tab"
                       aria-controls="pills-home" aria-selected="true">Apps and game development</a>
                </li>
                <li class="nav-item">
                    <a id="navLink" data-toggle="pill" href="#graphicsdesign" role="tab"
                       aria-controls="pills-home" aria-selected="true">Graphics Design</a>
                </li>
           </ul>
</div>

现在我要给你看js

var navLink = document.getElementById("navLink");

$("#pills-tabContent").hide();

$(document).on('click', function(e) {
    if ( $(e.target).closest('.nav-item').length ) {
        $("#pills-tabContent").show();
    }else if ( ! $(e.target).closest('#pills-tabContent').length ) {
        navLink.className = navLink.className.replace(/\bactive\b/g, "");
        navLink.className = navLink.className.replace(/\bshow\b/g, "");
        $('#pills-tabContent').hide();
    }
});

我想删除该类，它应该也适用于 IE。在这里，我只面临“活跃”类(class)的问题，其他人工作正常。示例:当我单击“Web 开发”时，“事件”类完美运行。当我点击 div 外部时，事件类将被删除。但是，当我点击“应用程序和游戏开发”时，“事件”类(class)完美运行。但是，当我在 div 外部单击时，它并没有删除“事件”类。

现在我真的很困惑问题是什么以及如何为此编写代码。

谢谢。

Answer 1

document.getElementById("navLink"); 将始终只返回一个元素。而是添加类，然后使用 document.getElementsByClassName("xyz")。

最好的选择是使用 Jquery。$('#navLink').removeClass('active').removeClass('show');