【jQuery教學】jQuery切換不同CSS樣式style:切換class、切換樣式、轉換不同CSS

7 月 10, 2015 | CSS, | 0 條留言

使用jQuery 控制CSS變換不同Class樣式,達到同一頁面切換成不同顯示效果。如以下使用圖文模式圖片模式文字模式,分別為三種class(.vw_01、.vw_02.、vw_03)做切換。
 

jQuery

$(function(){
 // 預設顯示第一個 Tab
 var _showTab = 0;
 $('ul.switch-button li').eq(_showTab).addClass('turnon');
 $('ul.switch-button li').click(function() {
  var $color = $(this)
  $color.addClass('turnon').siblings('.turnon').removeClass('turnon');
 });
 $('#sw_01').click(function() {

  $('.content-wrapper dl').addClass('vw_01').removeClass('vw_02 vw_03');
 });
 $('#sw_02').click(function() {

  $('.content-wrapper dl').addClass('vw_02').removeClass('vw_01 vw_03');
 });
 $('#sw_03').click(function() {

  $('.content-wrapper dl').addClass('vw_03').removeClass('vw_01 vw_02');
 });

});

 

DEMO | 下載範例程式碼