JSFiddle - React, Tailwind, and code Playground

HTML

<li class="closed"><span class="folder">Элементы кинематики</span>
                                <ul>
                                        <li><span class="file"><a href="docs/Part_Mexanika/1_1.htm" >1.1. Предмет механики. Основные понятия и определения</a></span></li>
                                        <li><span class="file"><a href="docs/Part_Mexanika/1_2.htm" >1.2. Кинематическое описание поступательного движения. Скорость. Ускорение</a></span></li>
                                        <li><span class="file"><a href="docs/Part_Mexanika/1_3.htm" >1.3. Кинематика вращательного движения твердого тела</a></span></li>
                                        <li><span class="file"><a href="docs/Part_Mexanika/inference_1.htm" >Краткие выводы</a></span></li>
                                        <li><span class="file"><a href="docs/Part_Mexanika/questions_1.htm" >Вопросы для самоконтроля и повторения</a></span></li>
                                </ul>
                        </li>

CSS

.next_t {color:red;}
.prev_t {color:yellow;}

JavaScript

$('span.file > a').live('click',function(e) {    
    $('span.file > a').each(function(i){
    $(this).removeClass('next_t');
    $(this).removeClass('prev_t');  
    
    });
   
    var ind = $('span.file > a').index(this);
    var siz = $("span.file > a").length;
    
    switch (ind){
        case 0:$("span.file > a").eq(ind+1).addClass('next_t'); break;
            
        case siz-1: $("span.file > a").eq(ind-1).addClass('prev_t'); break;
         
        default:     
        $("span.file > a").eq(ind-1).addClass('prev_t');
        $("span.file > a").eq(ind+1).addClass('next_t');
    
    
    }
    
     e.preventDefault(); 
    });