jquery - Adding a class to current menu tab -

jquery - Adding a class to current menu tab -

i'm using next toggle between 3 different divs..

check out working demo.

i've come unstuck trying find method apply different background color selected menu tab, (including default tab page loads - "weekly")

it's not possible add together class class it?

any ideas how jquery?

here's 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') homecoming 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>

you can add together multiple class 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') homecoming 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}

jquery css menu tabs