Javascript 如何使这个js更简单？

我已经用js代码在网站上显示了这样的页面

 //PAGE ABOUT
 $('nav ul.nav-menu li a#about-content').on("click", function() {
     $('section.content').not('content-about').removeClass('active')
     $('section.content.content-about').addClass('active');        
 });

 //PAGE PORTFOLIO
 $('nav ul.nav-menu li a#portfolio-content').on("click", function() {
     $('section.content').not('content-portfolio').removeClass('active')
     $('section.content.content-portfolio').addClass('active');        
 });

 //PAGE BLOG
 $('nav ul.nav-menu li a#blog-content').on("click", function() {
     $('section.content').not('content-blog').removeClass('active')
     $('section.content.content-blog').addClass('active');        
 });

 //PAGE CONTACT
 $('nav ul.nav-menu li a#contact-content').on("click", function() {
     $('section.content').not('content-contact').removeClass('active')
     $('section.content.content-contact').addClass('active');        
 });

---

你能帮我把这段代码简化一下吗？

它实际上相当简单。我认为你能做的最好的事情就是编写一个函数：

function handleClick(className) {
  $('section.content').not(className).removeClass('active');
  $('section.content.' + className).addClass('active');
}

您还可以将（'click'，cb）更改为

。单击（cb）

，正如上面提到的@Jaromanda X，您可以直接在ID上选择，因为ID必须是unqiue

// PAGE ABOUT
$('#about-content').click(handleClick('content-about');

//PAGE PORTFOLIO
$('#portfolio-content').click(handleClick('content-portfolio'));

//PAGE BLOG
$('#blog-content').click(handleClick('content-blog'));

//PAGE CONTACT
$('#contact-content').click(handleClick('content-contact'));

---

这是最简单的

首先，从每个选择器中删除所有

nav ul.nav-menu li a

，因为ID是唯一的

$('#about-content,#portfolio-content,#blog-content,#contact-content').on("click", function() {
    var base = this.id.split('-')[0];
    $('section.content').not('content-' + base ).removeClass('active');
    $('section.content.content-' + base).addClass('active');
});

注意：如果您的ID不是唯一的，jQuery似乎至少在某种程度上可以处理这个问题——但我建议您不要有重复的ID，永远：p

---

首先，从所有选择器中删除

nav ul.nav-menu li a

，因为您正在通过每个选择器末尾的ID选择元素。。。由于ID在文档中必须是唯一的，因此您使用的前缀是冗余的。请为元素指定一个ID，例如

ID=“about”

-

portfolio

，然后在onclick函数中使用元素ID设置选择器

not（'content-'+ElementID）

和

$（'section.content.content-'+ElementID）.addClass

通过这种方式，可以为所有这些元素运行一个函数。