jQuery多個分組樣式表切換器

我有三組css樣式表，我想每次從每個組中選擇一個。尋找一些可以完成這項工作的jQuery，平滑過渡並且頁面不會刷新。jQuery多個分組樣式表切換器

這裏有三組：

要選擇顏色 - 三種人需要被激活。
要選擇頁眉或頁腳 - 兩者中的一個需要激活。
選擇側邊欄的寬度 - 需要激活其中一個。

可以選擇一個組中的樣式表，而不管其他兩個組中的樣式表是否處於活動狀態。

<!--To Choose Colors--> 
<link rel="stylesheet" type="text/css" href="grey.css" title="tgrey"> 
<link rel="alternate stylesheet" type="text/css" href="green.css" title="tgreen"> 
<link rel="alternate stylesheet" type="text/css" href="navy.css" title="tnavy"> 

<!--To Choose either header or footer--> 
<link rel="stylesheet" type="text/css" href="topbar.css" title="ttop"> 
<link rel="alternate stylesheet" type="text/css" href="bottombar.css" title="tbottom"> 

<!--To Choose normal or wide sidebar--> 
<link rel="stylesheet" type="text/css" href="smallsidebar.css" title="tsmall"> 
<link rel="alternate stylesheet" type="text/css" href="bigsidebar.css" title="tbig">

謝謝

來源

2014-01-17 swapna

你爲什麼要把這個標記爲jQuery？ – Michiel

@MichielReyers這是在標題中，現在添加在後。我正在尋找jquery styleswitcher，那就是爲什麼。我應該將它標記爲CSS嗎？ – swapna

您最多可以添加5個標籤，所以'css'肯定會是一個有用的標籤。 –

這應該爲你工作：

在這個例子中，我只用了2個樣式表之間進行切換，但它是否適合你的情況，你可以推斷。

我添加了一個類color兩個樣式表[類似，你需要什麼]：

<link class="color" rel="stylesheet" type="text/css" href="green.css" title="green"> 
<link class="color" rel="alternate stylesheet" type="text/css" href="red.css" title="red">

如果每個樣式表只改變一個div的background-color。 [red.css爲'red'，green.css爲'green']。

功能的HTML body等待點擊任何地方：

$(document).ready(function() { 
    function newSheet(className, color) { 
     var nodeList = $('link.' + className); 
     for(var i = 0; i < nodeList.length; i++) { 
      nodeList[i].disabled = true; 
      if (nodeList[i].title === color) { 
       nodeList[i].disabled = false; 
      } 
     } 
    } 
    $('body').click(function() { 
     $(this).fadeOut(function() { 
      newSheet('color', 'red'); 
      $(this).fadeIn(); 
     }); 
    }); 
});

如果這對你的作品，你想幫助外推到你需要的樣式表的其他2「班」，讓我知道！

來源

2014-02-05 03:10:45

jQuery多個分組樣式表切換器

回答

相關問題