Я новичок в jQuery, поэтому я сожалею, если это глупый вопрос. Но я просматриваю Stack Overflow, и я могу найти то, что наполовину работает, я просто не могу заставить его полностью работать.
У меня есть 2 вкладки - 1 активен, другой - нет. Как только щелкнуть неактивную вкладку, я хочу, чтобы ей был присвоен класс active и предыдущий активный класс, который нужно удалить. И наоборот, каждый раз, когда нажимается неактивная вкладка.
Любая помощь будет замечательной!
Вот что я сейчас имею: http://jsfiddle.net/zLpe5/
Здесь я попытался добавить и удалить класс:
$(document).ready(function() {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(".tab").addClass("active");
});
});
Если бы кто-нибудь мог помочь с слиянием двух бит скрипта в моей скрипке, это тоже было бы огромной помощью. Поскольку я довольно смущен, как это делается!
Спасибо :)
Попробуй это
$(document).ready(function() {
$(".tab").click(function () {
$(".tab").removeClass("active");
// $(".tab").addClass("active"); // instead of this do the below
$(this).addClass("active");
});
});
когда вы используете $(".tab").addClass("active"); , он нацелен на все элементы с именем класса .tab. Вместо этого, когда вы используете this он ищет элемент, который имеет событие, в вашем случае элемент, который нажат.
Надеюсь, это поможет вам.
Вы можете удалить класс active из всех .tab и использовать $(this) целевой текущий щелкнул .tab:
$(document).ready(function() {
$(".tab").click(function () {
$(".tab").removeClass("active");
$(this).addClass("active");
});
});
Ваш код не будет работать, потому что после удаления класса active из всех .tab, вы также добавить класс active ко всему .tab снова. Поэтому вам нужно использовать $(this) вместо $('.tab') чтобы добавить класс active только к .tab anchor
Вы удалили активный класс со всех вкладок, но затем снова добавили активный класс ко всем вкладкам. Вы должны только добавить активный класс к текущей вкладке, подобной так: http://jsfiddle.net/QFnRa/
$(".tab").removeClass("active");
$(this).addClass("active");
$(document).ready(function() {
$(".tab").click(function () {
if(!$(this).hasClass('active'))
{
$(".tab.active").removeClass("active");
$(this).addClass("active");
}
});
});
Используйте jquery cookie https://github.com/carhartl/jquery-cookie, а затем вы можете быть уверены, что класс останется на странице обновления.
Сохраняет идентификатор элемента clicked в cookie, а затем использует его для добавления класса при обновлении.
//Get cookie value and set active
var tab = $.cookie('active');
$('#' + tab).addClass('active');
//Set cookie active tab value on click
//Done this way to preserve after page refresh
$('.topTab').click(function (event) {
var clickedTab = event.target.id;
$.removeCookie('active', { path: '/' });
$( '.active' ).removeClass( 'active' );
$.cookie('active', clickedTab, { path: '/' });
});
Попробуй это:
$(document).ready(function() {
$(".tab").click(function () {
$("this").addClass("active").siblings().removeClass("active");
});
});