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

Вместо привязки обработчика click к каждому элементу на основе id, добавьте общий класс к каждому элементу и привяжите к нему обработчик 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>