jQuery- addClass或removeClass-是否有附录类？
https://stackoverflow.com/questions/2427023
-
19-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
我的选项卡上有CSS悬停在图像上，并且当我单击图像方法时，我试图使课程从.how_on更改为.how_on。
我的标签是
如何|什么|当|谁|为什么
我有每个课程（.how，.how_on），（.what，.what_on）等...
我可以使用click（function（）{}）将jQuery添加到原始类名称; ？
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.
});
您正在使用className创建唯一的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都必须处理所有类别（“ UI-STATE-DEFAULT”，“ UI-State-Hover”等），如果只能调用API来更新类STEM“ UI），它会更容易-State-“带有选择后缀。
因此，在您的情况下，简单的jQuery方法将是：
// 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”变成“ how how”。
.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部分
$(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部分
<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特异性。
不隶属于 StackOverflow
