Question

我有代码在网站上显示这样的页面

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

你能帮我把这段代码变得更简单吗？

Answer 1

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

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

您也可以将.on('click', cb)更改为.click(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'));

Answer 2

这很简单

首先，从每个选择器中删除所有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

如何使这个js更简单？

2 个答案: