0

いくつかの相互作用を処理する関数を作成しました。クリックとホバーの機能を使用しています。この例では、ホバーに使用しています。それはうまく機能しますが、1つのキャッチがあります。リンクにカーソルを合わせてから再度リンクしても、何も起こりません。ホバーしてフィードバックを表示するには、まず別のリンクにホバーする必要があります。結果はクリックと同じです。リンクをクリックすると。フィードバックが表示されます。同じリンクをもう一度クリックすると、フィードバックが消えます。ホバーとクリックの例として JSFiddle を作成しました。

ホバー:

// Applying Best Practices
$(function(){
function applyingBestPractices(event) {

    // Create Vars
    var clickedClass = $(this).attr('class');
    var examples = $(".applying-best-practices .examples");
    var links = $(".applying-best-practices .nav a");

    // Add Tabindex to all Results
    examples.each(function(index) {
        $(this).attr('tabindex', index)
    });

    // Remove class for all
    examples.removeClass("showIT");
    links.removeClass("nav-select");

    // Adds active class to link 
    $(this).addClass("nav-select");

    // Add Class and Focus
    $("#" + clickedClass).addClass("showIT").focus();
    return false;
}
$(".applying-best-practices .nav a").hover(applyingBestPractices);
});

クリック: http://jsfiddle.net/xEvav/1/

// Applying Best Practices
$(function(){
function applyingBestPractices(event) {

    // Create Vars
    var clickedClass = $(this).attr('class');
    var examples = $(".applying-best-practices .examples");
    var links = $(".applying-best-practices .nav a");

    // Add Tabindex to all Results
    examples.each(function(index) {
        $(this).attr('tabindex', index)
    });

    // Remove class for all
    examples.removeClass("showIT");
    links.removeClass("nav-select");

    // Adds active class to link 
    $(this).addClass("nav-select");

    // Add Class and Focus
    $("#" + clickedClass).addClass("showIT").focus();
    return false;
}
$(".applying-best-practices .nav a").click(applyingBestPractices);
});
4

2 に答える 2

0

解決策は次のとおりです。

$(function(){
    function buildingYourKnowledgeAndSkills(event) {

        if ($(this).hasClass('nav-select')) {
            $(".feedback .examples.showIT").focus();
        }
        else {
            // Create Vars
            var clickedClass = $(this).attr('class');
            var examples = $(".building-your-knowledge-and-skills .examples");
            var links = $(".building-your-knowledge-and-skills .nav a");

            // Add Tabindex to all Results
            examples.each(function(index) {
                $(this).attr('tabindex', index)
            });

            // Remove class for all
            examples.removeClass("showIT");
            links.not(this).removeClass("nav-select");

            // Adds active class to link 
            $(this).addClass("nav-select");
            $("#" + clickedClass).addClass("showIT").focus();
        }
        return false;
    }
    $(".building-your-knowledge-and-skills .nav a").click(buildingYourKnowledgeAndSkills);
});

リンクにクラス（「nav-select」）があるかどうかを確認するために、この if else ステートメントを追加しました。

http://jsfiddle.net/xEvav/48/

于 2013-03-01T21:38:16.517 に答える