変更アクティブLIとページの一部をリロードする

Question

私はjsで私のページをクリックすると2つのシンプルな機能を持っています。最初は現在のliでCSSアクティブを変更し、もう1つはコンテンツをリロードするだけです。

変更アクティブ李

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

リロード内容は

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

問題はそれだけでそこに2を実行している場合はリロードコンテンツのみ機能機能、ですが、私は、関数の作品のそれぞれをテストしてみましたそのまま。

どのように機能作品を一緒にすることができますか？

あなたはこのようなものを使用することができ、これは私のコンテンツ構造

 <!-- 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

です：

$(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

はあなたが唯一の機能でそれを達成することができます。それが役に立てば幸い！

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); 
});