Javascript Jquery 在单击时更改 CSS 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14212721/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery change CSS class on clicking
提问by Syed Salman Raza Zaidi
I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code
我正在处理一个项目，我有一些锚点，如选项卡，每个锚点都有一些 CSS 类，选定的选项卡有单独的 css 类。我正在单击选项卡，我想将其 CSS 类更改为选定的 css 类我已经完成了此功能，但我遇到了一些问题，即之前选择的选项卡也具有相同的类，我如何将之前选择的选项卡更改为未选择类，下面是我的代码
$(".btn").each(function ()
{
$(this).click(function () {
$(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");
});
});
<div class="course-Search-tabs">
<a href="#" class="course-btn-tab-selected btn" id="a">A</a>
<a href="#" class="course-btn-tab btn" id="b">B</a>
<a href="#" class="course-btn-tab btn" id="c">C</a>
<a href="#" class="course-btn-tab" id="d">D</a>
</div>回答by Adil
You do not need to use eachhere, on clickof element with class btnremove class for all elements with class btnand assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selectedclass from previous elements.
您不需要在each这里使用，对click具有类的元素btn删除类，用于所有具有类的元素，btn并将所需的类分配给作为referred by $(this)事件源的当前元素 ( )。另外我假设您想从以前的元素中删除选定的类。
$(".btn").click(function () {
if($(this).hasClass("course-btn-tab-selected"))
$(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
});
Edit:You can improve this by hold the last selected element and changing it class if it suits you.
编辑：您可以通过保留最后一个选定的元素并根据需要更改它的类来改进这一点。
previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {
previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");
$(this).addClass("course-btn-tab-selected");
previouslyClicked = $(this);
});
回答by Praveen Kumar Purushothaman
Wrong usage of $.each()
错误使用 $.each()
Use this way:
使用这种方式：
$(".btn").click(function () {
$(".btn").removeClass("course-btn-tab-selected");
$(this).addClass("course-btn-tab-selected");
});
回答by A. Wolff
Should do the trick:
应该做的伎俩：
$(".btn").click(function () {
$(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");
});
回答by Jam
First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.
首先，您需要使用 jQuery 选择器将点击事件绑定到“btn”CSS 类，这将允许您一次操作所有按钮。
Next find the previously selected button, remove the selected class and add the regular class.
接下来找到之前选择的按钮，删除选择的类并添加常规类。
Finally remove the regular class from the clicked button and add the selected class.
最后从单击的按钮中删除常规类并添加选定的类。
$('.btn').bind('click', function () {
var previouslySelectedButton = $('.course-btn-tab-selected');
var selectedButton = $(this);
if (previouslySelectedButton)
previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');
selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});
Alternatively here is a working example using your HTML: jsFiddle
或者，这里是一个使用 HTML 的工作示例：jsFiddle
回答by Jai
There is another way:
还有一种方法：
$(".btn").click(function (e) {
e.preventDefault();
$(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
$(this).addClass("course-btn-tab-selected");
});
