导航栏不会在第一次点击时更新活动列表

Question

当我第二次单击我的导航栏时，单击的 link 变为活动状态，但不是在第一次单击时。任何想法为什么？它仅在第二次单击后起作用，但在此代码段中不起作用... 对此的任何帮助将不胜感激....!!!! 你好，当我第二次单击我的导航栏时，单击的 link 变为活动状态，但不是在第一次单击时。任何想法为什么？它仅在第二次单击后起作用，但在此代码段中不起作用... 对此的任何帮助将不胜感激....!!!! 你好，当我第二次单击我的导航栏时，单击的 link 变为活动状态，但不是在第一次单击时。任何想法为什么？它仅在第二次单击后起作用，但在此代码段中不起作用... 如有任何帮助，我们将不胜感激....!!!!

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");
  });
}

Answer 1

您不需要此属性 onclick='somethingSector()' ，因为您使用 jQuery 附加事件 click，这里是一个带有修复的片段，问题是您总是执行

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

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

更新：我使用原生Javascript代码，并使用.classList.add()和.classList.remove()切换class属性，还保留了 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>

导航栏不会在第一次点击时更新活动列表

Navbar won't update active li on first click

html

javascript

css

hyperlink

html-lists