Добавление класса jQuery на выбранную вкладку

Question

Я новичок в jQuery и пытаюсь изменить скрипт.Демонстрационная версия сценария здесь .Прямо сейчас они добавляют строку над выбранной вкладкой, которая мне не нужна.То, что я хочу сделать, это просто добавить класс к якору, например

<a class="tab active" href="#">Tab Name</a>

, чтобы я мог просто использовать CSS, чтобы изменить цвет фона или что-то для активных кнопок.приведенный ниже код - это то, для чего они используются в настоящее время при нажатии на вкладку.

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.hasClass('.active')) return false;

    $(this).addClass('active')

Answer 1

the_tabs.click(function(e){
    var element = $(this);
    if( element.hasClass('active') ) {
        return false;
    }
    else {   
        the_tabs.removeClass('active'); 
        element.addClass('active');
    }
}  

Answer 2

вместо

if(element.find('.active').length) return false;

использование

if(element.hasClass('.active')) return false;

или вы должны использовать .filter вместо .find, команда find пытается найти дочерний узел с классом .active, но .filter отфильтровывает коллекцию, чтобы найти соответствующий css-selecotr

Answer 3

Вам просто нужно:

 $(this).addClass('nameOfYourClass')

чтобы добавить класс к объекту, по которому щелкнули

Answer 4

Попробуйте это:

the_tabs.click(function(e){
    /* "this" points to the clicked tab hyperlink: */
    var element = $(this);

    /* If it is currently active, return false and exit: */
    if(element.hasClass('active')) return false;

    /* Detecting the color of the tab (it was added to the class attribute in the loop above): */
    var bg = element.attr('class').replace('tab ','');

    $('ul.tabContainer .active').removeClass('active');
    element.addClass('active');

    /* Checking whether the AJAX fetched page has been cached: */

    if(!element.data('cache'))
    {   
        /* If no cache is present, show the gif preloader and run an AJAX request: */
        $('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');

        $.get(element.data('page'),function(msg){
            $('#contentHolder').html(msg);

            /* After page was received, add it to the cache for the current hyperlink: */
            element.data('cache',msg);
        });
    }
    else $('#contentHolder').html(element.data('cache'));

    e.preventDefault();
})

Также проверьте мой блог (веб-сайт) на наличие хороших руководств по jQuery. :)