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上正常工作。在这里，我只面临“活动”班级的问题，其他人都很好。示例：当我单击“ Web开发”时，“活动”类运行良好。当我在div之外单击时，将活动类删除。但是，当我单击“应用程序和游戏开发”时，“活动”类就可以正常工作。但是，当我在div之外单击时，它并没有删除“活动”类。

现在，我确实感到困惑，这是什么问题以及如何为此编写代码。

谢谢。

Answer 1

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

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

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

1 个答案: