-1

I include my header in every page like this

<?php include('header.php'); ?>

My jquery code looks like this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/javascript">
    $('.nav').on('click', 'li', function(){
        $('.nav li').removeClass('active-nav');
        $(this).addClass('active-nav');
    });
</script>

which is at the bottom of my index.php. The problem that occurs is that when I press directory (or home), the border (css active) is there for like 0.5 seconds then it disappears.

Here's the code in header.php and main.css (a part of it)

<ul class="nav navbar-nav">
    <li><a href="index.php"><span class="glyphicon glyphicon-home"></span><span class="sr-only">Home</span></a></li>
    <li><a href="directory.php"><span class="glyphicon glyphicon-th"></span> Directory</a></li>   
</ul>

+

.navbar .active-nav {
border-bottom: 3px solid #4b7eb4;
}
Marc
  • 21
  • 3
  • Unclear what you mean, what you want to happen, and what the problem is. Could you be clearer in your explanation? Maybe show screenshots or give us a link to the site in which it is happening? You should be able to just host a static version, as there's no php we need to worry about really. – Whothehellisthat Aug 28 '16 at 15:12
  • as @Dario pointed out you maybe are just navigating to another page, that's why you loose all of the javascript-applied css. However your question is pretty unclear and I think you should read more on the subject of HTTP before posting here. – adrian7 Aug 28 '16 at 15:22
  • @Whothehellisthat I want the :active to work. When I press home or directory the :active works for a small amount of time then disappears. I could fix this by not having an external header and just add the active class to each link, but I'd rather have the header in a separate file. – Marc Aug 28 '16 at 15:43
  • There is no ":active" in your css whatsoever. Do you mean the ".active-nav" class? – Whothehellisthat Aug 28 '16 at 15:45
  • Yeah, meant the .active-nav class. Sorry – Marc Aug 28 '16 at 15:46

1 Answers1

1

The reason is that you are clicking on a link so you are applying the class but you are also leaving the page (that's why the class is removed)

Dario
  • 6,152
  • 9
  • 39
  • 50