[英]jQuery Adding Class on Selected Tab
I am a beginner with jQuery and I am trying to modify a script. 我是jQuery的初学者,正在尝试修改脚本。 The script demo is here .
脚本演示在这里 。 Right now, they add a line above the selected tab, which I don't want.
现在,他们在所选标签上方添加了一行,这是我不希望的。 What I want to do is just add a class to the anchor like a
我想要做的就是像添加一个类到锚
<a class="tab active" href="#">Tab Name</a>
that way I can just use CSS to change the background color or something for the active buttons. 这样,我可以只使用CSS来更改背景颜色或活动按钮的内容。
The code below is what they currently have for when you click on a tab. 下面的代码是您单击选项卡时当前具有的功能。
the_tabs.click(function(e){
/* "this" points to the clicked tab hyperlink: */
var element = $(this);
/* If it is currently active, return false and exit: */
if(element.hasClass('.active')) return false;
$(this).addClass('active')
the_tabs.click(function(e){
var element = $(this);
if( element.hasClass('active') ) {
return false;
}
else {
the_tabs.removeClass('active');
element.addClass('active');
}
}
You just need: 您只需要:
$(this).addClass('nameOfYourClass')
to add a class to the clicked object 将类添加到单击的对象
instead of 代替
if(element.find('.active').length) return false;
use 采用
if(element.hasClass('.active')) return false;
or you have to use .filter
instead of .find
, find is trying to find a child node that has the class .active but .filter
filters out the collection to find the matching css-selecotr 或者您必须使用
.filter
而不是.find
,find试图找到具有.active类的子节点,但是.filter
过滤出集合以找到匹配的css-selecotr
Try this: 尝试这个:
the_tabs.click(function(e){
/* "this" points to the clicked tab hyperlink: */
var element = $(this);
/* If it is currently active, return false and exit: */
if(element.hasClass('active')) return false;
/* Detecting the color of the tab (it was added to the class attribute in the loop above): */
var bg = element.attr('class').replace('tab ','');
$('ul.tabContainer .active').removeClass('active');
element.addClass('active');
/* Checking whether the AJAX fetched page has been cached: */
if(!element.data('cache'))
{
/* If no cache is present, show the gif preloader and run an AJAX request: */
$('#contentHolder').html('<img src="img/ajax_preloader.gif" width="64" height="64" class="preloader" />');
$.get(element.data('page'),function(msg){
$('#contentHolder').html(msg);
/* After page was received, add it to the cache for the current hyperlink: */
element.data('cache',msg);
});
}
else $('#contentHolder').html(element.data('cache'));
e.preventDefault();
})
Also check my blog (website) for some nice jQuery guides. 还可以在我的博客(网站)上查找一些不错的jQuery指南。 :)
:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.