Question

我正在使用jQuery并尝试在点击时交换图像样式。我使用.tabs作为多页表单，并且想要在单击该页面时调用事件来交换图像类。有点像A表格处理完成状态。像面包屑类型。我的代码如下。任何对正确方向的帮助都将非常感激。 -Thanks

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

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

Answer 3

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

Answer 4

将您的代码更改为此

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

单击标记时交换图像类。 jQuery的

4 个答案: