jquery - jQuery - 活动/点击/重复代码

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

标签： jquery

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>