CODEWITHSUNDEEP
javascriptjqueryhtml
Morgan Ng
Morgan Ng

Reputation: 813

Adding link class on href using jQUERY

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

Answers (5)

Morgan Ng
Morgan Ng

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')
    })

RESULT : enter image description here

Upvotes: 0

Bunkerbuster
Bunkerbuster

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

Abhishek Dhanraj Shahdeo
Abhishek Dhanraj Shahdeo

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

priya_singh
priya_singh

Reputation: 2488

$(function(){
    $('a').click(function(){
        $(this).parent('li').siblings().find('a').removeClass('cur');
        $(this).addClass('cur');
    });
});

Hope it will work :)

parent method

siblings method

Upvotes: 2

Michael Maa&#223;
Michael Maa&#223;

Reputation: 104

removeClass(className) takes the name of class you want to remove. So try this:

$('a').removeClass('cur');

Upvotes: 0

Related Questions