CODEWITHSUNDEEP
jquerycssmenutabs
Grant
Grant

Reputation: 1337

Adding a class to current menu tab

I'm using the following to toggle between 3 different divs..

Check out the working DEMO.

I've come unstuck trying to find a method to apply a different background color to the currently selected menu tab, (including the default tab that the page loads with - "Weekly")

It's not possible to add a class to a class is it?

Any ideas how I could do this with jQuery?

Here's my code...

jQuery :

 jQuery('.viewSchedule').click(function () {
    var index = $(this).index(),
    newTarget = jQuery('.targetSched').eq(index);
    console.log(index+newTarget)
    jQuery('.targetSched').not(newTarget).fadeOut('fast')
    newTarget.delay('fast').fadeIn('fast')
    return false;
})

CSS : 

 .viewSchedule {}
 .viewBTN {display:block;width:auto;height:auto;padding:5px 10px 5px 10px;background:#ccc;color:#242424;cursor:pointer;border-radius:5px;float:left;margin-left:10px;font-family:dina,Arial, Helvetica, sans-serif;font-size:16px;text-align:center;}
 .viewBTN:hover {background:#FFF;color:#333;}


 .targetSched {display: none}
 .targetSched.first {display: block}

HTML :

 <a class="viewSchedule" target="1"><span class="viewBTN">WEEKLY</span></a>
 <a class="viewSchedule" target="2"><span class="viewBTN">DAILY</span></a>
 <a class="viewSchedule" target="3"><span class="viewBTN">LIST</span></a>

 <br /><br /><br /><br />

 <div id="sh-week" class="targetSched first">WEEKLY CONTENT</div>
 <div id="sh-daily" class="targetSched">DAILY CONTENT</div>
 <div id="sh-list" class="targetSched">LIST CONTENT</div>

Upvotes: 0

Views: 70

Answers (2)

Kristoffer J&#228;l&#233;n
Kristoffer J&#228;l&#233;n

Reputation: 4748

JSFiddle

jQuery:

jQuery('.viewSchedule').click(function () {
    $('.viewBTN').removeClass('selected');
    $(this).find('.viewBTN').addClass('selected');

    var index = $(this).index(),
    newTarget = jQuery('.targetSched').eq(index);
    jQuery('.targetSched').not(newTarget).fadeOut('fast')
    newTarget.delay('fast').fadeIn('fast')        
    return false;
})

CSS:

.selected {background: blue}

Upvotes: 1

Maulik Anand
Maulik Anand

Reputation: 1449

YOu can add multiple class to a single element .

DEMO

JAvascript

jQuery('.viewSchedule').click(function () {
        var index = $(this).index(),
        newTarget = jQuery('.targetSched').eq(index);

    $(".viewSchedule.active").removeClass("active");
     $(this).addClass("active");
    console.log(index+newTarget)
        jQuery('.targetSched').not(newTarget).fadeOut('fast')
        newTarget.delay('fast').fadeIn('fast')
        return false;
    })

CSS

.viewSchedule {}
.viewBTN {display:block;width:auto;height:auto;padding:5px 10px 5px 10px;background:#ccc;color:#242424;cursor:pointer;border-radius:5px;float:left;margin-left:10px;font-family:dina,Arial, Helvetica, sans-serif;font-size:16px;text-align:center;}
.viewBTN:hover {background:#FFF;color:#333;}


.viewSchedule.active .viewBTN{
    background-color:red;
    color:white;
}
.targetSched {display: none}
.targetSched.first {display: block}

Upvotes: 0

Related Questions