jQuery - AddClass или RemoveClass - есть ли класс приложения?
-
19-09-2019 - |
Вопрос
У меня есть CSS, зависящие над изображениями для моих вкладок, и я пытаюсь заставить класс измениться с. Как.
Мои вкладки
Как | Что | Когда | Кто | ПОЧЕМУ
У меня есть занятия для каждого (.how, .how_on), (. Что,. Что_он) и т. Д.
Могу ли я сделать jQuery добавить _on в исходное имя класса с помощью click (function () {}); ?
HTML:
<div id="tab_container">
<ul class="tabs">
<li><a class="how_on" href="#how">How</a></li>
<li><a class="why" href="#why">Why</a></li>
<li><a class="what" href="#what">What</a></li>
<li><a class="who" href="#who">Who</a></li>
<li><a class="when" href="#when">When</a></li>
</ul>
<p><img src="images/tab_top.jpg" width="864px" height="6px" alt="" border="0" /></p>
</div>
<div class="tab_body">
<!-- HOW -->
<div id="how" class="tab">
<strong>HOW IT WORKS:</strong>
</div>
JQuery:
<script type="text/javascript">
jQuery(document).ready(function(){
//if this is not the first tab, hide it
jQuery(".tab:not(:first)").hide();
//to fix u know who
jQuery(".tab:first").show();
//when we click one of the tabs
jQuery(".tabs a").click(function(){
//get the ID of the element we need to show
stringref = jQuery(this).attr("href").split('#')[1];
// adjust css on tabs to show active tab
//hide the tabs that doesn't match the ID
jQuery('.tab:not(#'+stringref+')').hide();
//fix
if (jQuery.browser.msie && jQuery.browser.version.substr(0,3) == "6.0") {
jQuery('.tab#' + stringref).show();
}
else
//display our tab fading it in
jQuery('.tab#' + stringref).fadeIn();
//stay with me
return false;
});
});
</script>
CSS:
.tabs
{
width: 683px;
height: 29px;
padding: 0;
margin: 0;
display: inline;
float: left;
overflow: hidden;
list-style-type: none;
}
.tabs li
{
margin: 0;
padding: 0;
display: inline;
float: left;
}
.tabs a { background-position: 0 -58px;}
.tabs .on a { background-position: 0 -29px;}
.how,
a.how:link,
a.how:visited
{
float: left;
display: inline;
width: 135px;
height: 29px;
margin: 0;
text-decoration: none;
text-indent: -99999px;
overflow: hidden;
background-image: url("../images/how_tab.jpg");
}
Решение
Обновлено:
Попробуй это:
$('.tabs a').click(function() {
$('.tabs a').removeAttr('id'); // remove all ids
$(this).attr('id', this.className + "_on") // create how_on as this id.
});
Вы используете имя класса для создания уникального идентификатора. Это сделает то же самое, что вы пытаетесь сделать. Вот образец с выбранным «почему».
<ul class="tabs">
<li><a class="how" href="#how">How</a></li>
<li><a id='why_on' class="why" href="#why">Why</a></li>
<li><a class="what" href="#what">What</a></li>
<li><a class="who" href="#who">Who</a></li>
<li><a class="when" href="#when">When</a></li>
</ul>
Конечно, Самый простой способ это добавить класс .how_on и иметь оба класса.
<div class='how how_on'>some stuff</div>
В этом нет ничего плохого, и вы можете легко переопределить стили или нацелиться на элемент.
.how { color: #000; }
div.how_on { color: #F00; } /* increased specificity */
Если вы хотите убедиться, что это переопределяет его, увеличьте специфичность.
Другие советы
Когда вы используете addClass
, он добавляет/добавляет класс, если вы не удалите сначала, используя removeClass
, так что вам нравится это:
$('.how_on').mouseover(function(){
$(this).removeClass('class_name').addClass('class_name');
});
$('.why').mouseover(function(){
$(this).removeClass('class_name').addClass('class_name');
});
// and so on.........
Я бы хотел, чтобы у JQuery это было, но, насколько я могу судить, это не так. Вы всегда можете использовать removeClass
Чтобы избавиться от одной версии и addClass
Чтобы добавить другой. В качестве альтернативы, вы можете приготовить свой маленький плагин. Кажется полезным, что нужно сделать; Даже интерфейс jQuery должен иметь дело со тем, чтобы разобраться со всеми его классами («UI-State-Defaul», «UI-State-Hover» и т. Д.), И было бы легче, если бы он мог просто вызвать API, чтобы обновить ствол класса «UI UI -state- "с выбранным суффиксом.
Таким образом, простой способ сделать это в вашем случае будет чем -то вроде:
// to go from "foo" to "foo_on":
function turnOn(which) {
$('.tabs').find('a.' + which)
.removeClass(which)
.addClass(which + '_on');
};
// to go from "foo_on" to "foo"
function turnOff(which) {
$('.tabs').find('a.' + which + '_on')
.removeClass(which + '_on')
.addClass(which);
}
Тогда вы позвоните turnOn("how")
Когда вы хотите, чтобы вкладка «Как» переключилась на класс «How_on», и turnOff("how")
чтобы заставить его перейти от «How_on» к «как».
.addClass( function(index, class) )
AddClass принимает анонимную функцию, и вы можете добавить логику для добавления класса здесь
как
$('ELEMENT SELECTION').addClass(function() {
return $(this).attr("class") + 'CLASS TO BE ADDED';
});
Вы всегда можете сделать:
jQuery(".tabs a").click(function(){
this.className += '_on';
}
который добавит желаемый суффикс.
Еще лучше добавить класс «активации» в содержащий «li».
jQuery(".tabs a").click(function(){
$(this).parent().toggleClass('on');
}
И ваш CSS должен выглядеть так:
/* here i removed the 'a.how_on' entry */
.how,
a.how:link,
a.how:visited
{
float: left;
display: inline;
width: 135px;
height: 29px;
margin: 0;
text-decoration: none;
text-indent: -99999px;
overflow: hidden;
}
a.how:visited, a.how:link, a.how:hover
{
background-image: url("../images/how_tab.jpg");
background-position: 0 -58px;
}
/* this will cause the link to behave different when its parent is of class on */
.on a.how
{
background-image: url("../images/how_tab.jpg");
background-position: 0 -29px;
}
и вы можете определить общее поведение для ваших вкладок, свяжите это
.tabs a { /* style */ }
.tabs a:link { /* link style */ }
.tabs a:hover { /* hover style */ }
.tabs .on a { /* activated style */ }
.tabs .on a:link { /* activated link style */ }
.tabs .on a:hover { /* activated hover style */ }
Вы можете Полностью замените свою часть jQuery с этим;
Это должно работать, как и ожидалось!
JavaScript Part
$(function() {
var tabs = $('div.tab_body > div.tab');
tabs.hide().filter(':first').show();
$('div#tab_container ul.tabs a').click(function() {
tabs.hide();
var myhash = this.hash.split('#')[1];
tabs.filter(this.hash).show();
$('a:not(.' + myhash + '_on)').each(function() {
var h = this.hash.split('#')[1];
$(this).removeClass(h + '_on').addClass(h);
});
$(this).removeClass(myhash).addClass(myhash + '_on');
return false;
}).filter(':first').click();
});
HTML Part
<div id="tab_container">
<ul class="tabs">
<li><a class="how" href="#how">How</a></li>
<li><a class="why" href="#why">Why</a></li>
<li><a class="what" href="#what">What</a></li>
<li><a class="who" href="#who">Who</a></li>
<li><a class="when" href="#when">When</a></li>
</ul>
</div>
<div class="tab_body">
<div id="how" class="tab">
<strong>how</strong>
</div>
<div id="why" class="tab">
<strong>why:</strong>
</div>
<div id="what" class="tab">
<strong>what</strong>
</div>
<div id="who" class="tab">
<strong>who</strong>
</div>
<div id="when" class="tab">
<strong>when</strong>
</div>
</div>
Надеюсь, это поможет!
С Уважением
Есть несколько подходов.
- Удалить класс, добавить
_on
к строке и добавьте новый класс. - Просто спроектируйте свой
*_on
классы для изменения оригинальных стилей классов. Тогда все, что вам нужно сделать, это удалить*_on
класс, чтобы вернуться к старому стилю.
Почему бы тебе просто не добавить класс on
на рассматриваемые элементы и изменить ваши правила CSS с .how and .how_on
к .how and .how.on
?
Тогда в вашем .how.on
Вы можете просто переопределить все, что установлено в .how
что вы хотите изменить.
Я не думаю, что вам нужно сгибать JavaScript/jQuery в вашу волю, а скорее использовать специфичность CSS для того, для чего она была предназначена.