Using the $page->id() somehow doesn’t make sense because that’s always the same and has nothing to do with your headlines.
So you would have to check the URL for currently active headline (and $headline in case you are using said field method is an object with 3 props (url, text, id), anyway).
The problem is that you cannot get the hash server-side, so you need some JavaScript here.
So it works on the <li> but if I replace '.clicks li' by '.clicks li a' the .active is removed only if I click a second time on the <a> , is there a way to make it working ? Or should I found an other way ?
If you replace '.clicks li'´ with .clicks li a, then siblings() will not longer work, as the other a elements inside the li elements are not the siblings?