jquery - 单击 a 标签交换图像类。jQuery

Question

我正在使用 jQuery 并尝试在单击时交换图像样式。我正在将 .tabs 用于多页表单，并希望在单击该页面时调用一个事件来换出图像类。有点像表格流程完成状态。像面包屑类型。我的代码如下。任何朝着正确方向的帮助将不胜感激。-谢谢

JS：

$(function () {
        $("#nav-ul li a").on("click", function (e) {
            e.preventDefault();
            $('img#no-1').removeClass("nav-number");
            $(this).children('img').addClass("nav-number-active")
        });
    });

HTML：

    <div id="nav-Container">
        <ul id="nav-ul">
            <li>
                <a href="#page-1" class="nav-a-link">General Information
                <img src="images/no-images/img-no-1.png" id="no-1" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-2" class="nav-a-link">Setpoints
                <img src="images/no-images/img-no-2.png" id="no-2" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-3">Call Flow Structure
                <img src="images/no-images/img-no-3.png" id="no-3" class="nav-number" />
                </a>
            </li>
            <li>
                <a href="#page-4">Summary
                <img src="images/no-images/img-no-4.png" id="no-4" class="nav-number" />
                </a>
            </li>
        </ul>
    </div>

样式表：

.nav-number{
    margin:0px;
    float:right;
    padding:10px 0px 0px 13px;
    opacity:0.4;
    border:0px;
}
.nav-number-active{
    margin:0px;
    float:right;
    padding:10px 0px 0px 13px;
    border:0px;
}

Answer 1

调用 addClass 或 removeClass 时，不要使用 '.'。直呼其名。

 $("#nav-ul li").delegate("a", "click", function () {
         $(this).children("a").addClass("nav-number")
             .siblings().removeClass("nav-number-active");
             return false;
     });

另外，不确定为什么要$(this).children("a")在事件处理程序中使用a. 不应该是$(this).find('img').addClass(....吗？

另外，最好先删除活动类，然后将其添加到您想要的类中：

 $("#nav-ul li").delegate("a", "click", function (e) {
    e.preventDefault();
    $('a.nav-number-active').removeClass("nav-number-active");
    $(this).addClass("nav-number-active")
 });

Answer 2

更正了脚本中的名称。设置先删除类然后添加。系统中的一些奇怪错误也阻止了结果。我做了一个简单的计算机重启，就成功了。不确定是什么原因，但怀疑缓存。？

Answer 3

将您的代码更改为此

$(function () {
    $("#nav-ul li a").on("click", function (e) {
        e.preventDefault();
        $(this).find("img").removeClass("nav-number").addClass("nav-number-active");
    });
});

或者，您可以使用 toggleClass 使其更清洁，但如果再次单击它，它将恢复为原始类。

$(function () {
    $("#nav-ul li a").on("click", function (e) {
        e.preventDefault();
        $(this).find("img").toggleClass("nav-number nav-number-active");
    });
});

Answer 4

    var navs = $('#nav-ul a');
    navs.on('click', function () {    
       navs.removeClass('active');         
        $(this).addClass('active');
   });