使用 Javascript/JQuery 更改 CSS 链接属性 onClick?-前端问题

Change CSS Link Property onClick with Javascript/JQuery?(使用 Javascript/JQuery 更改 CSS 链接属性 onClick?)

本文介绍了使用 Javascript/JQuery 更改 CSS 链接属性 onClick?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

例如，我有两个链接:

<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>

我想要这样当我单击链接 1 时，链接 1 变为蓝色以表示选中，链接 2 保持黑色.当用户点击链接 2 时，链接 2 的颜色变为蓝色，链接 1 的颜色变回白色.

I want it so that when I click Link 1, Link 1 changes to color blue to represent selected, Link 2 stays black. When the user clicks Link 2, then Link 2 changes color to blue and Link 1 changes color back to white.

我目前有一个用于链接的默认 CSS 属性:

I currently have a default CSS property for links:

a:link {
   color: #green;
}

我不确定处理doColorChange()"函数的最佳方式.最好为两种颜色创建两个 CSS 类，然后让 doColorChange 切换它们?还是给这两个链接一个 id 并在那里设置颜色属性更好?我该如何做到这一点?

I am unsure of the best way to handle the "doColorChange()" function. Is it best to create two CSS classes for the two colors, then have doColorChange switch them? Or is it better to give the two links an id and somehow set color properties there? How do I accomplish this?

推荐答案

JQUERY:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

HTML 标记:

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>

我建议在链接中添加一个类，这样会更容易.

I suggest adding a class to the links, that way it's easier.

CSS:

a.link.active { color:blue; }

添加了实时版本(小提琴):http://jsfiddle.net/gHb9F/

Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/

这篇关于使用 Javascript/JQuery 更改 CSS 链接属性 onClick?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！