Reputation: 813
I researched quite a bit on onClick changes for links but couldn't quite figure out the solution I need. I have a side bar menu that contains multiple links. I have a default class added to the content I want to appear as default. However when I click another link in the sidebar, I want the previous link's "cur" class to be removed, replaced with nothing, then apply "cur" to the new link. Here's my code:
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.bankCssClass($data)" data-key="工商银行" data-code="ICBC-NET-B2C" class="bank_2">
<a href="javascript:void(0)" class=""></a></li>
jQUERY :
$(function(){
$('a').click(function(){
$('a').removeClass('');
$(this).addClass('cur');
});
});
Upvotes: 0
Views: 266
Reputation: 813
i figure out whats the solution for this . I might wanna share it out .
HTML :
<ul data-bind="foreach: thirdPayBank" class="bank_list" style="height: 102px;">
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="工商银行" data-code="ICBC" class="bank_2"><a href="javascript:void(0)" class="bank"></a></li>
<li data-bind="attr:{'data-key':key, 'data-code':bankcode}, css: memberModel.netbankCssClass($data), click: $root.netBankSelectBank" data-key="农业银行" data-code="ABC" class="bank_3"><a href="javascript:void(0)" class="bank"></a></li>
CSS :
.bank_list li a.cur {
width: 198px;
height: 48px;
float: left;
border: 1px solid #f0bebe;
background: url(../images/zijin_icon.png) no-repeat -897px -188px;
}
jQUERY :
$(".bank").click(function(){
$(".bank").removeClass('bankcur')
$(this).addClass('bankcur')
})
Upvotes: 0
Reputation: 1001
First you could change yout HTML to something like this
HTML
<!-- add a parent class (if you dit not do already) You can give it a class like parent -->
<ul class="parent">
<!-- give you're child also a class (and one of them is active) -->
<li><a href="" class="child active">1</a></li>
<li><a href="" class="child">2</a></li>
<li><a href="" class="child">3</a></li>
</ul>
Jquery
$(function(){
// find you're specific group you want to click
$('a.child').click(function(event){
// catch and stop the default action
event.preventDefault();
// find the specific parent (upstream the dom) (in this case ul with class parent)
var $parent = $(this).closest("ul.parent");
// search within your dom structure (downstream) for a child with a class that is active
// and remove the class
$parent.find("a.active").removeClass("active");
// add the class to the clicked a
$(this).addClass('active');
});
});
Upvotes: 0
Reputation: 1356
Try this:
$(function(){
$('a').click(function(){
$('li.blank-2 a').removeClass('cur');
$(this).addClass('cur');
});
});
If your other lis also have the class blank-2
Upvotes: 1
Reputation: 2488
$(function(){
$('a').click(function(){
$(this).parent('li').siblings().find('a').removeClass('cur');
$(this).addClass('cur');
});
});
Hope it will work :)
Upvotes: 2
Reputation: 104
removeClass(className) takes the name of class you want to remove. So try this:
$('a').removeClass('cur');
Upvotes: 0