删除/添加链接类 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，它帮助我弄清楚了如何在点击时添加类（上图），但是我无法删除非活动链接的“活动”类。有人可以帮帮我吗？

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

您只需从当前a 中删除该类。

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

Answer 4

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

Answer 5

试试这个：

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

Answer 6

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