Код css не работает

Question

Я хочу, чтобы, когда я работаю над любой кнопкой навигации, он будет красным цветом, а остальные будут одного цвета. У меня есть тег jstl. Вот почему он не работает в jsfiddle .. где проблема здесь?

$(document).ready(function(e) { 
 
    $("ul li a").click(function() { 
 
    $("nav a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
    }); 
 
});

body { 
 
    width: 100%; 
 
    line-height: 1; 
 
} 
 
header { 
 
    background: #fff; 
 
    width: 100%; 
 
    height: 76px; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 100; 
 
} 
 
a.active { 
 
    color: red; 
 
} 
 
nav { 
 
    float: right; 
 
    padding: 20px; 
 
} 
 
ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    float: left; 
 
    padding: 10px 
 
} 
 
.current { 
 
    color: red; 
 
} 
 
@media only screen and (max-width: 640px) { 
 
    header { 
 
    position: absolute; 
 
    } 
 
    #menu-icon { 
 
    display: inline-block; 
 
    } 
 
    nav ul, 
 
    nav:active ul { 
 
    display: none; 
 
    position: absolute; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border: 5px solid #444; 
 
    right: 20px; 
 
    top: 60px; 
 
    width: 50%; 
 
    border-radius: 4px 0 4px 4px; 
 
    } 
 
    nav li { 
 
    text-align: center; 
 
    width: 100%; 
 
    padding: 10px 0; 
 
    margin: 0; 
 
    } 
 
    nav:hover ul { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="<s:url value='/home' />" class="current">Home</a> 
 
     </li> 
 
     <li><a href="<s:url value='/work' />">work</a> 
 
     </li> 
 
     <li><a href="<s:url value='/others' />">Others</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Answer 1

При нажатии на ссылку вы:

1. Начало некоторые JS
2. Изменение DOM текущей страницы изменить класс
3. завершении сеанса JS
4. Следуйте по ссылке
5. Выбросьте DOM вы просто модифицированы
6. загрузить новую страницу с новым DOM

Если вы хотите изменить классы по ссылке в новой страницы, вы должны сделать это либо :

• Перед отправкой страницы клиенту (это может быть с серверной стороны кода или зашиты в статический HTML)
• проверив location с JavaScript, находя соответствующий href, а затем изменяя этот элемент.

Answer 2

Есть несколько мест, которые необходимо изменить в качестве отправной точки. Первый в HTML, изменение тока в активном

<li><a href="..." class="active">Home</a></li> 

и в JS,

$(document).ready(function(e) { 
    $("ul li a").click(function(){ 
     $("ul li a").removeClass("active"); 
     $(this).addClass("active"); 
    }); 
}); 

jsfiddle