Navbar不会在第一次点击时更新活动的li

问题描述 投票：1回答：1

[当我第二次单击导航栏时，单击的链接将变为活动状态，但第一次单击时不会更改。有什么想法吗？它仅在第二次单击后有效，但在此代码段中不起作用...任何帮助，将不胜感激.... ！！你好当我第二次单击导航栏时，单击的链接将变为活动状态，但第一次单击时不会更改。有什么想法吗？它仅在第二次单击后有效，但在此代码段中不起作用...任何帮助，将不胜感激.... ！！你好当我第二次单击导航栏时，单击的链接将变为活动状态，但第一次单击时不会更改。有什么想法吗？它仅在第二次单击后有效，但在此代码段中不起作用...在这方面的任何帮助将不胜感激.... !!!!

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个回答
0
投票

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

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

这将设置您在其他<a>标记上每次单击时选择的第一个元素，并且click事件还会在所有元素上重新附加click事件，您只需要执行一次，请注意，我删除了功能也来自代码

Update

：我使用了本机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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.