combiner la modification active li et recharger une partie de la page javascript

Question

J'ai deux fonctions simples sur click dans ma page avec js, d'abord est de changer css actif en li actuel et l'autre est de recharger le contenu seulement.

changement li actif

$(".list li").on("click", function(){ 
    $(".list li").removeClass('active'); 
    $(this).addClass('active'); 
}); 

contenu reload seulement

$('.content').load('Passtel/dashboard'); 
$('ul.list li a').click(function(){ 
    var page = $(this).attr('href'); 
    $('.content').load('Passtel/'+page); 
    return false; 
}); 

le problème est, il fonctionne seulement le contenu de reload ne fonctionne que s'il y a deux sont en cours d'exécution, mais je l'ai testé chacun des travaux de fonction tel quel.

Comment puis-je faire fonctionner les deux fonctions ensemble?

c'est ma structure de contenu

 <!-- Menu --> 
     <div class="menu"> 
      <ul class="list"> 
       <li class="active"> 
        <a href="dashboard"> 
         <i class="material-icons">home</i> 
         <span>DASHBOARD</span> 
        </a> 
       </li> 
       <li> 
        <a href="check"> 
         <i class="material-icons">text_fields</i> 
         <span>CHECK SITE</span> 
        </a> 
       </li> 
       <li> 
        <a href="datek"> 
         <i class="material-icons">layers</i> 
         <span>DATA TEKNIS</span> 
        </a> 
       </li> 
      </ul> 
     </div> 

Answer 1

Vous pouvez utiliser quelque chose comme ceci:

$(function() { 
    $('.content').load('Passtel/dashboard'); 
    $('ul.list li a').click(function() { 
     e.preventDefault(); 
     $(".list li").removeClass('active'); 
     $(this).parent().addClass('active'); //added parent() here 
     var page = $(this).attr('href'); 
     $('.content').load('Passtel/' + page); 
     return false; 
    }); 
}); 

//$('.content').load('Passtel/dashboard'); 
 
$('ul.list li a').click(function (e) { 
 
     e.preventDefault(); 
 
\t $(".list li").removeClass('active'); 
 
\t $(this).parent().addClass('active'); 
 
\t var page = $(this).attr('href'); 
 
\t //$('.content').load('Passtel/' + page); 
 
\t return false; 
 
});

.active { 
 
    background-color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="menu"> 
 
\t <ul class="list"> 
 
\t \t <li class="active"> 
 
\t \t \t <a href="dashboard"> 
 
\t \t \t \t <i class="material-icons">home</i> 
 
\t \t \t \t <span>DASHBOARD</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href="check"> 
 
\t \t \t \t <i class="material-icons">text_fields</i> 
 
\t \t \t \t <span>CHECK SITE</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t \t <li> 
 
\t \t \t <a href="datek"> 
 
\t \t \t \t <i class="material-icons">layers</i> 
 
\t \t \t \t <span>DATA TEKNIS</span> 
 
\t \t \t </a> 
 
\t \t </li> 
 
\t </ul> 
 
</div>

Answer 2

Vous pouvez accomplir cela avec une seule fonction. J'espère que cela aide!

jsbin.com

const ul = $(".list"); 
const list = ul.find('li'); 

ul.on("click", 'li a', function(e){ 
    e.preventDefault(); 
    list.removeClass('active'); 
    $(this).parent().addClass('active'); 

    var page = $(this).attr('href'); 
    // replace this with your $('.content').load('Passtel/'+page); 
    $('.content').load('https://jgatjens.com/?' + page); 
});