Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Шаблоны (TPL) Как реализовать кнопки переключения картинок как на softportal

Как реализовать кнопки переключения картинок как на softportal


     05.01.2014    Шаблоны (TPL)    1563

вопрос
Здравствуйте, как реализовать кнопку(и) переключение картинок, как на софтпортале?
Как реализовать кнопки переключения картинок как на softportal

Ответил: ПафНутиЙ


Примерно вот так

JS:
jQuery(document).ready(function($) {
    $(document).on('click', '.selector', function(event) {
        event.preventDefault();
        $('html').removeClass('class1 class2 class3').addClass($(this).data('class'));
        $(this).addClass('active').siblings().removeClass('active')
    });
});

HTML:
<span class="selector" data-class="class1">class1</span>
<span class="selector" data-class="class2">class2</span>
<span class="selector" data-class="class3">class3</span>

Комментарии пользователей (10)

teleoperator27
10

122 | 34

teleoperator27 - 5 января 2014 10:31 - Юзер

ну либо через JS присваивать разные классы body с соответствующими стилями, либо насандалить несколько шаблонов с разным фоном и кнопки переключения это просто ссылки на шаблон, примерно по аналогии как делается два языка на сайте

вАСЯ
40 | 4

вАСЯ - 5 января 2014 11:35 - Юзер

можно поподробнее с 1-м вариантом через JS?

nambo1
4

107 | 23

nambo1 - 5 января 2014 12:13 - Юзер

Если ты про эти вкладки, то могу дать свои (на jquery)

nambo1
4

107 | 23

nambo1 - 5 января 2014 12:32 - Юзер

Так более симпатично

teleoperator27
10

122 | 34

teleoperator27 - 5 января 2014 14:42 - Юзер

да при чем тут табы? здесь нужна замена класса body по нажатию. Готового варианта нет, увы, но по этому вопросу в инете много инфы. Время будет если то накидаю

teleoperator27
10

122 | 34

teleoperator27 - 5 января 2014 15:03 - Юзер

для примера
<script> 
            $(document).ready(
                function() {
                    $("a.my-meny").click( function() { // назначаем реакцию на событие всем ссылкам с классом my-meny
                            $("a.my-meny").removeClass("act"); // при клике удаляем класс act из всех ссылок меню
                            $(this).addClass("act"); // добавляем в нажатую ссылку класс act
                        }
                     );  
                }
            );


</script>
по аналогии сделать для body class="бла бла "> Только не забывайте, что этого мало, еще и куки потеребить придеться, что бы у юзера выбор запомнился :)

nambo1
4

107 | 23

nambo1 - 5 января 2014 15:33 - Юзер

на табах это всё проще

teleoperator27
10

122 | 34

teleoperator27 - 5 января 2014 16:27 - Юзер

Цитата: nambo1
на табах это всё проще
шо за бред ))) вы хоть понимаете принцип работы табов?

nambo1
4

107 | 23

nambo1 - 5 января 2014 16:56 - Юзер

teleoperator27,
да понимаю, и аргументирую то, что на табах это будет проще реализовать (лично для меня)

teleoperator27
10

122 | 34

teleoperator27 - 5 января 2014 17:12 - Юзер

Цитата: nambo1
nambo1
то есть если на сайте планируется 8 цветов бэка, то главную страницу придется грузить 8 раз, только в 7 из них будет display:none; Вы перед тем, как советы давать, хотя бы интернет почитайте.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы