SELECTED NAVIGATION

by Ashenvale Poring

HTML

<ul class="x-navigation">
<li class="active">
    <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard</span></a>                        
</li>
<li>
    <a href="index.php"><span class="fa fa-desktop"></span> <span class="xn-text">Dashboard2</span></a>                        
</li>
</ul>

CSS

.x-navigation {
    list-style-type: none; }
.x-navigation li a {
    text-decoration: none; }
.x-navigation li .xn-text {
    color: blue; }
    .x-navigation li.active .xn-text {
        color: black; }

JavaScript

$(".x-navigation li").click(function(){
        event.preventDefault();
        $(this).addClass("active").siblings().removeClass("active");
});