Question

单击链接时是否可以更改CSS，并在单击其他链接时将其恢复为正常状态，同时更改CSS？

    <div id="nv_wrap">
        <a class="panel nv7" href="#item8"></a>
        <a class="panel nv6" href="#item7"></a>
        <a class="panel nv5" href="#item6"></a>
        <a class="panel nv4" href="#item5"></a>
        <a class="panel nv3" href="#item4"></a>
        <a class="panel nv2" href="#item3"></a>
        <a class="panel nv1" href="#item2"></a>
    </div>

Answer 1

使用jQuery，如下所示：

$("#nv_wrap a.panel").click(function(){
    $("#nv_wrap a.clicked").removeClass("clicked"); //returns the old one to its normal state
    $(this).addClass("clicked"); //assigns an additional class to the clicked element.
});

Answer 2

是的，实际上有几种方法可以做到这一点。在您的示例中，您甚至可以使用a:active选择器，其中包含仅适用于活动链接的css。

a { color: blue }
a:active { color: red }

除了您点击的链接外，所有链接现在都是蓝色的;那个变红了。

CNC中试图在jsfiddle中展示一个例子，但我想这不起作用因为iframes

Answer 3

$('div#nv_wrap a.panel').click(function(e) {
    e.preventDefault();
    $(this).addClass('clicked').siblings().removeClass('clicked');
});

编辑：

示例CSS：

a { color: blue; }
a.clicked { color: red }

使用CLICK更改CSS？

3 个答案: