1

以下は、リンクタブのコードです。

HTML

<div class="sortLinks right">
    <label>Sort by</label>
    <a onclick="javascript:SortOrder('DATE')" href="#">Date Modified</a>
    <span class="sort_sep">&nbsp;</span>
    <a onclick="javascript:SortOrder('ALPHA')" href="#">Alphabetical</a>
</div>

CSS

a:focus
{
    color:Blue;    
}

JQuery

function SortOrder(order) {
    $.ajax({
        type: "POST",
        cache: false,
        url: "@Url.Action("SecondarySkillDetails", "SkillLifeCycle")",
        data: { primarySkillID: $("#ddlPrimarySkills").val(), sortorder: order },
        success: function (data) {
            $("#content").html(data);
        },
        error: function (xhr, textStatus, error) {
           alert (error);
        }
    });
}

アクティブなリンクを青色で強調表示したい.ここでは、青色で強調表示されているリンクを選択しているときに、外側をクリックすると再び黒色になります.どうすればこれを回避できますか?

4

3 に答える 3

2

他のものよりも少し変更しましたが、ここに実際の例を示します。

フィドル

まず、on を使用するようにクリック ロジックを更新し、次に on を使用してクラスactiveをアクティブな選択に追加しました。

 $(document).ready(function(){
    $('.sortLinks').on('click','a',function() {
        $('.sortLinks a').removeClass("active");
        var clazz = $(this).attr('class');
        $(this).addClass('active');
        SortOrder(clazz);
    });
});

例では、ajax呼び出しをコメントアウトしたことに注意してください（フィドルでは機能しないため）

于 2013-11-04T11:09:52.170 に答える
1

これを使って

a {
color: #0077CC;
cursor: pointer;
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: #0077CC !important;
}
a:visited {
color: #4A6B82;
}
a:active {
color: #6BAC28;
font-weight: bold;
text-decoration: underline;
}
于 2013-11-04T11:07:51.620 に答える