javascript - 结合更改事件 li 和重新加载部分页面 javascript

Question

我用js在页面中点击有两个简单的功能，第一个是更改当前li中的css事件状态，另一个是仅重新加载内容。

更改事件李

$(".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;
});

问题是，它只是功能重新加载内容仅在两个正在运行时才有效，但我已经测试了每个功能都按原样工作。

如何让这两个功能一起工作？

这是我的内容结构

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

您只需使用一个函数即可完成此任务。希望对您有帮助!

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