利用jQuery实现每次点击轮换CSS样式

今天我想完成一个点击元素来切换div的样式,起初利用普通的javascript来弄,可拼来拼去感觉太麻烦,后查阅jQuery的相关技巧资料,呵呵,猜我发现了什么?->toggle;看看描述资料先;

toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

呵呵,明白了吧,看完动手来弄下代码;如下:

jQuery(function($){
  $(".tooltips").toggle(function(){
     $('#wrap').addClass("full");
     $(this).html('Open the side bar');
  },function(){
     $('#wrap').removeClass("full");
     $(this).html('Close the side bar');
  });
});

teah

这段代码意思就是在tooltips这个元素上点击时,会轮换改变wrap元素的CSS样式,并且更改其元素内的内容!

这只是一个非常非常简单的应用,其实我们还可以进行更一步的扩展,呵呵~就看你要用在什么场合了~

发表评论

电子邮件地址不会被公开。 必填项已用*标注