使用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 | 下載範例程式碼

 

 

您也可能喜歡這些文章

Copyright © 2018 ucamc