jQuery - 事件/onclick/重复代码

Question

我正在制作自己的网站，但我仍然是 jQuery 的初学者。但我已经成功地做了我想做的事。一切正常，但我认为效率不够。重复的代码并不让我高兴，但我找不到避免这种情况的方法。你能帮忙吗？

我只是提供 jQuery 代码，因为一切正常:

$(document).ready(function() {
    $("#main_content").load("home.html");

    $("#home").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $("#main_content").load("home.html");
    });
    $("#portfolio").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $("#main_content").load("portfolio.html");
    });
    $("#blog").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $("#main_content").load("blog.html");
    });
    $("#contact").click(function() {
        $(this).addClass("active").siblings().removeClass("active");
        $("#main_content").load("contact.html");
    });
});

Answer 1

不要根据 id 将 click 处理程序绑定(bind)到每个元素，而是向每个元素添加一个公共(public)类并绑定(bind) click 处理程序对此。

然后就可以使用

$('#main_content').load(this.id + '.html');

创建正确的目标

$(document).ready(function() {
    $("#main_content").load("home.html");
    
    $('.link').on('click', function () {
      $(this).addClass('active').siblings().removeClass('active');
     
      $('#main_content').load(this.id + '.html');
      
      console.log('Loading:', this.id + '.html'); // demo
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="link" id="home">Home</div>
<div class="link" id="portfolio">Portfolio</div>
<div class="link" id="blog">Blog</div>
<div class="link" id="contact">Contact</div>