Установить активную ссылку (без списка ul)

Question

Я искал об этом, но только нахожу решения на основе ul.

У меня есть этот код:

<div class='nav'> 
    <a class='nav-link nav-01' id="tab01" href='#scene-1'></a> 
    <a class='nav-link nav-02' id="tab02" href='#scene-2'></a> 
    <a class='nav-link nav-03' id="tab03" href='#scene-3'></a> 
    <a class='nav-link nav-04' id="tab04" href='#scene-4'></a> 
</div> 

Я хотел бы изменить класс (например, «нав-01» в «нав-01-на»), когда нажмите на него. Кроме того, каждая ссылка имеет активный стиль класса (nav-01-on для nav-01, nav-02-on для nav-02 ...).

Любые предложения? Заранее благодарю ;-)

Answer 1

Кроме того, каждая ссылка имеет активный стиль класса (nav-01-on для nav-01, nav-02-on для nav-02 ...).

Поскольку вы работаете с классами, вам не нужно иметь другое имя класса для описания «активного» состояния ссылок. Это классная вещь о CSS-классах.

Поскольку ваши ссылки уже имеют уникальный идентификатор в виде атрибута id, который вы им указали, вам нужно всего лишь применить общий класс «активное состояние», например on (может быть, что угодно) , Тогда в вашем CSS вы могли бы сделать что-то вроде

 

    .on { 
     /* general rules for elements with the .on class */ 
    } 

    #tab01.on { 
     /* specific rules for element #tab01 with the .on class */ 
    } 

Я хотел бы изменить класс (например, «нав-01» в «нав-01-на»), когда нажмите на него.

Поскольку ваш вопрос отмечен как jquery Я буду использовать jQuery, так что вот наивное решение того, что вы хотите. Я уверен, вы можете улучшить его.

//We start assuming we have no active link 
var $activeLink = null; 

//We apply a listener to every element with the class .nav-link, using jQuery 
$('.nav-link').click(function() { 
    if ($activeLink) { 
     $activeLink.removeClass('on'); 
    } 
    //Store the link we clicked on as the active link. 
    //Notice we are wrapping it with the jQuery function, 
    //so $activeLink is a jQuery object 
    $activeLink = $(this); 
    $activeLink.addClass('on'); 
}); 

Вот скрипку вышеперечисленное: https://jsfiddle.net/p1tumym9/4/

Answer 2

Working Fiddle to play around with

Что вы должны сделать, чтобы сделать жизнь намного проще для себя, чтобы переключаться между одним active классом и в вашем CSS просто укажите, как будет выглядеть каждая из ваших ссылок, если у нее есть класс active, вместо создания множества уникальных классов (которые могут быть труднодоступными).

Как переключаться между активной ссылки:

$('.nav').find('a').click(function(){ 
    // Remove active class from all links 
    $('.nav').find('a').each(function(){ 
    $(this).removeClass('active'); 
    }); 
    // Add active class to current link 
    $(this).addClass('active'); 
}); 

И в вашем CSS просто указать, каким образом каждая ссылка будет выглядеть, когда дается active класс:

.nav-01.active { 
    /* active styles for nav-01 */ 
} 

.nav-02.active { 
    /* active styles for nav-01 */ 
} 

.nav-03.active { 
    /* active styles for nav-01 */ 
} 

.nav-04.active { 
    /* active styles for nav-01 */ 
}