Sunday, 15 August 2010

jquery - How use addClass and removeClass same anchor and div .. anchor is click addClass and item is addClass active -



jquery - How use addClass and removeClass same anchor and div .. anchor is click addClass and item is addClass active -

how can utilize anchor click addclass , item addclass 1 one?

how utilize jquery add together class , removeclass , javascript?

one anchor active == 1 item active

two anchors active == 2 item active

<div class="itemlabel"> <a href="#select1">1</a> <a href="#select2">2</a> <a href="#select3">3</a> <a href="#select4">4</a> <a href="#select5">5</a> <a href="#select6">6</a> <a href="#select7">7</a> <a href="#select8">8</a> </div> <div class="item active"> <img src="xx"> <span> teest</span> <div class="lablecircle" id="select1">1</div> </div> <div class="item"> <img src="xx"> <span> teest</span> <div class="lablecircle" id="select2">2</div> </div> <!-- repeat other items -->

jquery:

$(document).ready(function(){ $(".itemlabel a").on("click" ,function(){ $(this).addclass("active").siblings().removeclass("active"); }); });

http://jsfiddle.net/aungnyeinmin/d7wab/

use .index() find out anchor clicked , utilize index select corresponding item below:

jquery(function($) { var $anchors = $('.itemlabel a'), $items = $('.item'); $anchors.on('click', function() { var selectedindex = $anchors.index(this); $anchors.removeclass('active').eq(selectedindex).addclass('active'); $items.removeclass('active').eq(selectedindex).addclass('active'); }); });

demo

jquery css

No comments:

Post a Comment