Css active

@sendxt · Регистрация: 25.04.2012

Студворк — интернет-сервис помощи студентам

как с помощью css поменять свойства элемента(блока) по которому кликнули, скажем фон? и чтобы когда ещё раз кликнул вернулись прежние стили? или это только JS?

@Daredevi1 · 16.06.2014, 16:31

Можно и на css сделать, если уж очень нужно. Но лучше на js

HTML5
1
2
<input id='foo' type='checkbox'/>
<label for='foo'></label>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
label {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-color: red;
}
 
#foo {
    display: none;
}
 
#foo:checked + label {
    background-color: green;
}

@dolte · 16.06.2014, 16:52

Вариант на js

HTML5
1
<div class="block"></div>

CSS
1
2
3
4
5
6
7
8
.block{
    
    width:100px;
    height:100px;
    border:1px solid black;
    cursor:pointer;
    
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(".block").click(function(){
  
    if($(this).hasClass('click')) {
            $(this).css("background","transparent");
            $(this).removeClass('click');
    }
    else {
            $(this).addClass('click');
            $(this).css("background","red");
    }    
});

Пример в песочнице: http://jsfiddle.net/bKr6G/1/

@sendxt · 16.06.2014, 16:56 **[ТС]**

Daredevi1,

подскажите что поправить если знаете.. или изменить

HTML5
1
2
3
4
5
6
7
8
9
10
11
 <div class="mobile-home-nav">furniture for Home</div>
        <div class="mobile-home-nav-active">furniture for Home</div>
        <div class="mobile-home-navigation">
            <ul>
                <li>Kitchen</li>
                <li>Living Room</li>
                <li>Bedroom</li>
                <li>Children's room</li>
                <li>Bathroom</li>
            </ul>
        </div>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 var flag = 0;
    $('.mobile-home-nav').click(function(){
        if(flag == '0'){
            $('.mobile-home-navigation').css('display', 'block');
            $('.mobile-home-nav').css('display', 'none');
            $('.mobile-home-nav-active').css('display', 'block');
            flag = 1;
        } else {
            $('.mobile-home-navigation').css('display', 'none');
            flag = 0;
        }
    });

сами стили не вставлял, ну суть та что один блок отключаю, другой включаю. Но срабатывает только после второго клика

Добавлено через 2 минуты
dolte, со сменой классы, в моих набросках или что-то типо этого можно набросать?
просто стилей много будет и лучше менять класс

@dolte · 16.06.2014, 17:01

sendxt,

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$(".block").click(function(){
  
    if($(this).hasClass('click')) {
            $(this).css("background","transparent");
            $(this).removeClass('click');
    }
    else {
            $(this).addClass('click');
            $(this).css("background","red");
    }    
});

а тут точно так-же, просто .css из кода выпилите, и впишите это в класс.
т.е получается

CSS
1
2
3
.click{
background:red;
}

JavaScript
1
2
3
4
5
6
7
8
9
$(".block").click(function(){
  
    if($(this).hasClass('click')) {
            $(this).removeClass('click');
    }
    else {
            $(this).addClass('click');
    }    
});

http://jsfiddle.net/bKr6G/2/

@sendxt · 16.06.2014, 17:37 **[ТС]**

dolte, фенькью вери матч))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,163

	Css active 16.06.2014, 14:51. Показов 1975. Ответов 5 Метки нет (Все метки) как с помощью css поменять свойства элемента(блока) по которому кликнули, скажем фон? и чтобы когда ещё раз кликнул вернулись прежние стили? или это только JS? 0

@sendxt 11 / 11 / 13 Регистрация: 25.04.2012 Сообщений: 1,163
	16.06.2014, 17:37 [ТС]
	dolte, фенькью вери матч)) 0

Css active

Решение