Question

我试图在点击链接时获取“.active-link：after”样式应用到哪个链接被点击，并显示相应的页面，如“＃about-page”。问题是“＃about-page”仅显示，所有链接都应用“.active-link：after”样式。

我对Jquery没有经验，但我觉得我大多数时候都知道我在HTML和CSS方面做了什么

HTML：

var navLink = $('.nav-link')
var aboutLink = $('#about-link');
var workLink = $('#work-link');
var contactLink = $('#contact-link');
var aboutPage = $('#about-page');
var workPage = $('#work-page');
var contactPage = $('#contact-page');

navLink.click(function togglePage(about, work, contact) {
 toggleAboutPage(about);
 toggleWorkPage(work);
 toggleContactPage(contact);
 return false;
});

function toggleAboutPage() {
 aboutPage.toggleClass('show');
 aboutLink.toggleClass('active-link');
};

function toggleWorkPage() {
 workPage.toggleClass('show');
 workLink.toggleClass('active-link');
};

function toggleContactPage() {
 contactPage.toggleClass('show');
 contactLink.toggleClass('active-link');
};

CSS：

$request->cookie('name');

JQUERY：

cookie

Answer 1

我就是这样做的：

$(".nav-link").click(function(){
  var index = $(".nav-link").index($(this));

  $(".nav-link").removeClass("active-link");
  $(this).addClass("active-link");

  $(".page").removeClass("show");
  $($(".page").get(index)).addClass("show");
});

Here is the CodePen demo

jquery点击链接是否已将样式应用于链接并显示元素？

1 个答案: