删除/添加链接类onclick

Question

我研究了很多onClick链接变化，但无法完全弄清楚我需要的解决方案。我有一个包含三个链接的侧栏菜单。我有一个默认的“活动”类添加到我想作为默认显示的内容。但是，当我点击边栏中的另一个链接时，我希望将前一个链接的“活动”类删除，替换为“非活动”，然后将“活动”应用于新链接。这里是我的代码：

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：

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

我读这previous post这帮助我弄清楚如何的onclick addClass（以上），但是我无法删除非活动链接的“活动”类。有人可以帮我吗？

Answer 1

事件代表团会很好，你可以使用delegate()^[docs]方法只触发处理程序具有inactive类的#sidebar的后代。

然后使用toggleClass()^[docs]方法切换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

试试这个：

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

Answer 4

您需要仅从当前a删除类

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