[AJAX] Menu actif

Bonjour,

Un petit souci que j'ai dans mon code que je n'ai pas réussi à corriger, quand j'ai un hover activé sur un lien avec la classe "active" et que je clique sur n'importe ou dans la page, le style disparaît sur mon lien. Je souhaiterais supprimer la class active seulement quand je clique sur un autre lien mais pas en dehors de mes liens. Ce qui n'est pas le cas actuellement. Merci par avance !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>
    <body>
        <a id='10' href="#" rel="nofollow noopener noreferrer" target="_blank">Ma cible 1</a>
        <a id='20' href="#" rel="nofollow noopener noreferrer" target="_blank">Ma cible 2</a>
 
        <div id="contenu">
        </div>
<script type="text/javascript">
$(document).ready(function(){
            $("a").click(function() {
                var mesData="id="+$(this).attr("id");
                $.ajax({
                    type: "GET",
                    url: "fonctionsAjax.php",
                    data: mesData,
                    success: function(data){
                         if (data !== '') {           
                              $(this).addClass("active");
                              $("#contenu").html(data);
                         } else {
                               $(this).removeClass("active");
                         }
                });
            }); 
           return false;
      });
    </script>
    </body>
</html>

Et le fichier fonctionsAjax.php

Code:

1
2
3
4
5
 
<?php
   $id=$_GET['id'];
   echo "<h1>technique Ajax : contenu ".$id."</h1>";
?>