当使用jQuery单击另一个链接时，如何向链接添加和删除当前状态

Hi there, it my first time here - please go easy on me!

你好,我第一次来这里 - 请放轻松我!

I am struggling to find an answer to my question which is:

我正在努力寻找我的问题的答案:

How to add and remove a CSS .current class to a link when another link is clicked. For example, using this code:

如何在单击其他链接时向链接添加和删除CSS .current类。例如,使用此代码:

<a class="boldthislink">Bold me?</a> <a class="boldhim">bold him</a> <a class="unboldhim">unbold him</a>

I want to make the first link bold by clicking the 2nd link and then unbold by clicking the third link. Is this possible?

我想通过单击第二个链接使第一个链接变为粗体,然后通过单击第三个链接将其展开。这可能吗?

For another example,

再举个例子,

My dev site is here: Karls dev site

我的开发站点在这里:Karls开发站点

On my dev site I want to make the <a> link 'background' underline/bold when you click 'Next' underneath the first paragraph of text, which will also send you to the next spread as it currently does. Then on the next page, when you click 'Previous or next' the link 'background' isn't underlined anymore, only the nav link of the spread that you are on, and so on.

在我的开发网站上,当你点击文本第一段下面的“下一步”时,我想让链接'背景'加下划线/粗体,这也会发送到目前的下一个点差。然后在下一页上,当您单击“上一个或下一个”时,链接“背景”不再加下划线,只显示您所在的传播的导航链接,依此类推。

Any help would be very appreciated!! Im a beginner with Jquery, and most of my code is open source taken from various places so may look scrappy to you! :-)

任何帮助将非常感谢!!我是Jquery的初学者,我的大多数代码都是从各个地方采取的开源代码,所以可能看起来很有争议! :-)

Many thanks, Karl.

非常感谢,卡尔。

4 个解决方案

#1

Bare minimum code (not optimized, polished, loved, given an education, or otherwise treated kindly):

裸露的最低代码(未经优化,抛光,喜爱,接受教育或以其他方式善待):

$('a.boldhim').click(function ()
{
    $('a.boldthislink').addClass('current');
});

$('a.unboldhim').click(function ()
{
    $('a.boldthislink').removeClass('current');
});

Make sure you're calling it inside of a document ready handler, e.g. one of these:

确保你在文档就绪处理程序中调用它,例如其中之一:

$(document).ready(function () { /* your code here */ });

or this (which shorthand for the above):

或者这个(上面的简写):

$(function () { /* your code here */ });

#2

These basic things are pretty much covered in every jquery tutorial. Try reading this one: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

每个jquery教程都涵盖了这些基本内容。尝试阅读本文:http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Pay attention to selectors and events.

注意选择器和事件。

#3

Make them all the same class, using linkclass in this example.

在这个例子中使用linkclass使它们成为同一个类。

$('.linkclass').click(function(){
  $('.current').removeClass('current');
  $(this).addClass('current');
});

This has the advantage of being scalable - you can have as many or as few links as you like and only one will be 'current' at any given time.

这具有可扩展的优点 - 您可以根据需要添加任意数量的链接,并且在任何给定时间只有一个链接是“当前的”。

#4

$(document).ready(function() {
  $('.boldhim').click(function() {
    $('.boldthislink').css('font-weight', 'bold');
  });
  $('.unboldhim').click(function() {
    $('.boldthislink').css('font-weight', 'normal');
  });
});

Or in your case you can do it like that

或者在你的情况下,你可以这样做

$(document).ready(function() {
  $('.next').click(function() {
    $(a.current).removeClass('current').next().addClass('current');
  });
  $('.prev').click(function() {
    $(a.current).removeClass('current').prev().addClass('current');
  });
});

#1