jQuery Несколько сгруппированных переключателей таблиц стилей

У меня есть три группы таблиц стилей CSS, и я хочу выбирать один из каждой группы все время. Ищете некоторый jQuery, который выполняет эту работу, с плавным переходом и что страница не обновляется.jQuery Несколько сгруппированных переключателей таблиц стилей

Вот три группы:

Чтобы выбрать Colors- один из трех должен быть активным.
Для выбора верхнего или нижнего колонтитула - один из двух должен быть активным.
Чтобы выбрать ширину боковой панели - один из двух должен быть активным.

Таблицы стилей в одной группе могут быть выбраны независимо от того, какая таблица стилей активна в других двух группах.

<!--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 to «red», green.css - «зеленый»].

Функция ожидает мыши в любом месте 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 Несколько сгруппированных переключателей таблиц стилей

ответ

Смежные вопросы