导航栏不会在第一次点击时更新活动 li答案

【问题标题】：Navbar won't update active li on first click导航栏不会在第一次点击时更新活动 li
【发布时间】：2020-05-21 08:00:18
【问题描述】：

当我第二次点击我的导航栏时，点击的链接会变为活动状态，但在第一次点击时不会。任何想法为什么？它仅在第二次单击后才起作用，但在此代码 sn-p 中不起作用... 对此的任何帮助将不胜感激......！！！！你好，当我第二次单击导航栏时，单击的链接变为活动状态，但在第一次单击时不会变为活动状态。任何想法为什么？它仅在第二次单击后才起作用，但在此代码 sn-p 中不起作用... 对此的任何帮助将不胜感激......！！！！你好，当我第二次单击导航栏时，单击的链接变为活动状态，但在第一次单击时不会变为活动状态。任何想法为什么？它仅在第二次单击后才起作用，但在此代码 sn-p 中不起作用... 对此的任何帮助将不胜感激....!!!!

function somethingSector() {
  doUpdateNavSector();
}

function doUpdateNavSector() {
  $(".start").addClass("active");
  $(".navTopNavSector a").click(function () {
    $(".navTopNavSector a").removeClass("active");
    $(this).addClass("active");
  });
}

.navTopNavSector {
     list-style-type: none;
     margin: 0;
     padding: 0;
     line-height: 2;
     overflow: visible;
     padding: 30px 0px 0px 0px;
}
 .navTopNavSector li{
     width:auto;
     float:left;
     padding:0;
     list-style-type: none;
     position:relative;
}
 .navTopNavSector li a{
     font-family: "Arial";
     display: inline-block;
     color: #bdb6ae;
     text-align: center;
     padding: 0px 25px 0px 0px;
     text-decoration: none;
     transition: 0.3s;
     font-weight: 700;
     font-size: 18px;
}
/* Change color on hover */
 .navTopNavSector a:hover {
     background-color: #fff;
     color: #00ff00;
     text-decoration: none;
}
/* Active/current link */
 .navTopNavSector a.active {
     background-color: #fff;
     color: #ff00ff;
     text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="navigation">
                <ul class="navTopNavSector">
                    <li><a href="#/" onclick="somethingSector()" class="active">ALL</a></li>
                    <li><a href="#/" onclick="somethingSector()">ARB</a></li>
                    <li><a href="#/" onclick="somethingSector()">ARC</a></li>
                </ul>
                <br />
            </div>
        </div>
    </body>
</html>

function doUpdateNavSector() {
  $(".start").addClass("active");
  $(".navTopNavSector a").click(function () {
    $(".navTopNavSector a").removeClass("active");
    $(this).addClass("active");
  });
}

【问题讨论】：

标签： javascript html css hyperlink html-lists

【解决方案1】：

你不需要这个属性 onclick='somethingSector()' ，因为你正在使用 jQuery 附加事件 click，这里是一个带有修复的 sn-p，问题是你总是执行

$('.start').addClass('active');

这会设置您在其他<a>tags 上每次点击时选择的第一个元素，点击事件也会再次在所有元素上重新附加点击事件，您只需要执行一次，请注意我删除了代码中的函数也

更新：我使用原生Javascript代码，并使用.classList.add()和.classList.remove()切换类属性，还保留onclick事件属性：

function somethingSector(el) {
  document.querySelector('.navTopNavSector .active').classList.remove("active");
  el.classList.add("active");
}

.navTopNavSector {
     list-style-type: none;
     margin: 0;
     padding: 0;
     line-height: 2;
     overflow: visible;
     padding: 30px 0px 0px 0px;
}
 .navTopNavSector li{
     width:auto;
     float:left;
     padding:0;
     list-style-type: none;
     position:relative;
}
 .navTopNavSector li a{
     font-family: "Arial";
     display: inline-block;
     color: #bdb6ae;
     text-align: center;
     padding: 0px 25px 0px 0px;
     text-decoration: none;
     transition: 0.3s;
     font-weight: 700;
     font-size: 18px;
}
/* Change color on hover */
 .navTopNavSector a:hover {
     background-color: #fff;
     color: #00ff00;
     text-decoration: none;
}
/* Active/current link */
 .navTopNavSector a.active {
     background-color: #fff;
     color: #ff00ff;
     text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head> </head>
    <body>
        <div class="container">
            <div class="navigation">
                <ul class="navTopNavSector">
                    <li><a href="#/" onclick="somethingSector(this)" class="active">ALL</a></li>
                    <li><a href="#/" onclick="somethingSector(this)">ARB</a></li>
                    <li><a href="#/" onclick="somethingSector(this)">ARC</a></li>
                </ul>
                <br />
            </div>
        </div>
    </body>
</html>

【讨论】：

感谢您的快速回复！问题是，我确实需要“onclick='doSomethingHere()”。我实际上是使用 All.style.display = block 和“无”调用要在登录页面上显示的外部 html 页面。有没有更好的方法来实现这一点？我是如此接近......直到我撞到这堵墙...... ;-(
好的，让我再检查一次。
@Ekato，我更新了我的答案，请检查一下，还请注意我是使用本机 javascript 完成的。
你太棒了！！！！！！！！！！！！！！！！！！！！！！！！！！！非常感谢！！！！！！！！！！！！！！！！！！！！！！！！！！！
很高兴为您提供帮助 :) 如果您觉得我的回答有用，请考虑 accepting answer :)