リンククラスの削除/追加onclick

Question

私はリンクのonClick変更についてかなり研究しましたが、私が必要とする解決方法を理解できませんでした。私は3つのリンクを含むサイドバーメニューを持っています。私はデフォルトとして表示したいコンテンツにデフォルトの「アクティブ」クラスを追加しました。しかし、私がサイドバーの別のリンクをクリックすると、前のリンクの "アクティブ"クラスを削除し、 "非アクティブ"に置き換えてから、新しいリンクに "アクティブ"を適用します。私は私が上記（onclickのaddClassする方法を見つけ出す手伝っこのprevious post読み

$(function(){ 
    $('a.inactive').click(function(){ 
     $('a.inactive').removeClass('inactive'); 
     $(this).addClass('active'); 
    }); 
}); 

：

HTML：：

<div id="sidebar"> 
    <ul> 
     <li><a href="#" id="1" class="active">1</a></li> 
     <li><a href="#" id="2" class="inactive">2</a></li> 
     <li><a href="#" id="3" class="inactive">3</a></li> 
    </ul> 
</div> 

CSS：

a.active { 
    background-color:#ccd9ff; 
    border-radius:15px 15px; 
} 

a.inactive { 
    border:0; 
    background:0; 
} 

jQueryのここに私のコードです）しかし、私はその後、アクティブでないリンクの「アクティブな」クラスを削除することができませんでした。誰かが私を助けることができますか？

Answer 1

ここではイベントの委譲が便利です。delegate()^[docs]メソッドを使用すると、子孫は、inactiveクラスを持つ#sidebarの子孫です。

メソッドを使用して、activeとinactiveクラスを切り替えます。

$(function(){ 
    var sidebar = $('#sidebar'); // cache sidebar to a variable for performance 

    sidebar.delegate('a.inactive','click',function(){ 
     sidebar.find('.active').toggleClass('active inactive'); 
     $(this).toggleClass('active inactive'); 
    }); 
}); 

あなたはここにコードをテストすることができますhttp://jsfiddle.net/dstpt/

Answer 2

私は "メートルの理解が、あなたがこの場合：

$(function(){ 
    $('a.inactive').click(function(){ 
     $("a.active").removeClass("active") 
        .addClass("inactive"); 

     $(this).removeClass('inactive') 
       .addClass('active'); 
    }); 
}); 

Answer 3

はこれを試してください：あなたは、現在aからクラスを削除する必要が

$(function(){ 
    $('a.inactive').click(function(){ 
     $(this).removeClass('inactive'); //remove the class *only* from this one 
     $(this).addClass('active'); 
    }); 
}); 

Answer 4

$(function(){ 
    $('a.inactive').click(function(){ 
     $('a').addClass('inactive'); 
     $(this).removeClass('inactive').addClass('active'); 
    }); 
}); 

Answer 5

$(function(){ 
    $('#sidebar').click(function(){ 
     $("a.active").removeClass("active") 
      .addClass("inactive"); 
     $(this).removeClass('inactive') 
      .addClass('active'); 
    }); 
}); 

Answer 6

enter code here $(document).ready(function() { 
$('.show-sidebar').on('click', function (e) { 
    e.preventDefault(); 
    $('div#main').toggleClass('sidebar-show'); 
    setTimeout(MessagesMenuWidth, 250); 
}); 
var ajax_url = location.hash.replace(/^#/, ''); 
if (ajax_url.length < 1) { 
    ajax_url = 'ajax/dashboard.html'; 
} 
LoadAjaxContent(ajax_url); 
$('.main-menu').on('click', 'a', function (e) { 
    var parents = $(this).parents('li'); 
    var li = $(this).closest('li.dropdown'); 
    var another_items = $('.main-menu li').not(parents); 
    another_items.find('a').removeClass('active'); 
    another_items.find('a').removeClass('active-parent'); 
    if ($(this).hasClass('dropdown-toggle') || $(this).closest('li').find('ul').length == 0) { 
     $(this).addClass('active-parent'); 
     var current = $(this).next(); 
     if (current.is(':visible')) { 
      li.find("ul.dropdown-menu").slideUp('fast'); 
      li.find("ul.dropdown-menu a").removeClass('active') 
     } 
     else { 
      another_items.find("ul.dropdown-menu").slideUp('fast'); 
      current.slideDown('fast'); 
     } 
    } 
    else { 
     if (li.find('a.dropdown-toggle').hasClass('active-parent')) { 
      var pre = $(this).closest('ul.dropdown-menu'); 
      pre.find("li.dropdown").not($(this).closest('li')).find('ul.dropdown-menu').slideUp('fast'); 
     } 
    } 
    if ($(this).hasClass('active') == false) { 
     $(this).parents("ul.dropdown-menu").find('a').removeClass('active'); 
     $(this).addClass('active') 
    } 
    if ($(this).hasClass('ajax-link')) { 
     e.preventDefault(); 
     if ($(this).hasClass('add-full')) { 
      $('#content').addClass('full-content'); 
     } 
     else { 
      $('#content').removeClass('full-content'); 
     } 
     var url = $(this).attr('href'); 
     window.location.hash = url; 
     LoadAjaxContent(url); 
    } 
    if ($(this).attr('href') == '#') { 
     e.preventDefault(); 
    } 
}); 
var height = window.innerHeight - 49; 
$('#main').css('min-height', height) 
    .on('click', '.expand-link', function (e) { 
     var body = $('body'); 
     e.preventDefault(); 
     var box = $(this).closest('div.box'); 
     var button = $(this).find('i'); 
     button.toggleClass('fa-expand').toggleClass('fa-compress'); 
     box.toggleClass('expanded'); 
     body.toggleClass('body-expanded'); 
     var timeout = 0; 
     if (body.hasClass('body-expanded')) { 
      timeout = 100; 
     } 
     setTimeout(function() { 
      box.toggleClass('expanded-padding'); 
     }, timeout); 
     setTimeout(function() { 
      box.resize(); 
      box.find('[id^=map-]').resize(); 
     }, timeout + 50); 
    }) 
    .on('click', '.collapse-link', function (e) { 
     e.preventDefault(); 
     var box = $(this).closest('div.box'); 
     var button = $(this).find('i'); 
     var content = box.find('div.box-content'); 
     content.slideToggle('fast'); 
     button.toggleClass('fa-chevron-up').toggleClass('fa-chevron-down'); 
     setTimeout(function() { 
      box.resize(); 
      box.find('[id^=map-]').resize(); 
     }, 50); 
    }) 
    .on('click', '.close-link', function (e) { 
     e.preventDefault(); 
     var content = $(this).closest('div.box'); 
     content.remove(); 
    }); 
$('#locked-screen').on('click', function (e) { 
    e.preventDefault(); 
    $('body').addClass('body-screensaver'); 
    $('#screensaver').addClass("show"); 
    ScreenSaver(); 
}); 
$('body').on('click', 'a.close-link', function(e){ 
    e.preventDefault(); 
    CloseModalBox(); 
}); 
$('#top-panel').on('click','a', function(e){ 
    if ($(this).hasClass('ajax-link')) { 
     e.preventDefault(); 
     if ($(this).hasClass('add-full')) { 
      $('#content').addClass('full-content'); 
     } 
     else { 
      $('#content').removeClass('full-content'); 
     } 
     var url = $(this).attr('href'); 
     window.location.hash = url; 
     LoadAjaxContent(url); 
    } 
});