Как изменить цвет нескольких div с помощью onclick

Допустим, у меня есть 3 интервала на странице. Нажимая на них, я показываю что-то. Теперь я хочу изменить цвет div, который я выбираю.Как изменить цвет нескольких div с помощью onclick

<div class="step_wrapper"> 
    <div id="step_box1"> <span>Content of page 1</span> 
    </div> 
    <div id="step_box2"> <span>Content of page 2</span> 
    </div> 
    <div id="step_box2"> <span>Content of page 3</span> 
    </div> 
</div>

Я пытался сделать как

$("step_box1").toggle(function() { 
    $(this).css("background-color", "red"); 
    }, 
    function() { 
    $(this).css("background-color", ""); 
    }); 

for 2nd div 

$("step_box2").toggle(function() { 
    $(this).css("background-color", "red"); 
    }, 
    function() { 
    $(this).css("background-color", ""); 
    });

и на 3-й один

$("step_box2").toggle(function() { 
    $(this).css("background-color", "red"); 
    }, 
    function() { 
    $(this).css("background-color", ""); 
    });

Но то, что мне нужно, чтобы выбрать по одному и который один выбран что ДИВ изменить цвет и другие вернуться к норме

источник

2016-01-28 Subho

'jQuery.fn.toggle (обработчик, обработчик ...)' осуждается в 1.8 и удалены в версии 1.9. – Satpal

, пожалуйста, уточните – Subho

Попробуйте $ (this) .addClass («ваш-красный-класс»); и $ (this) .removeClass («ваш-красный-класс»); –

Перед установкой одного «красного» вы должны установить все для нормального цвета:

$('.step_wrapper>div').css("background-color", "") 
$(this).css("background-color", "red")

источник

2016-01-28 08:01:38 k102

Во-первых, учитывая подпись toggle() метода, который вы используете, я предполагаю, что вы включили очень старую версию JQuery (< 1.9), как шаблон теперь устаревшее. Вы должны обновить jQuery до более новой версии вашего проекта.

Во-вторых, вы можете достичь этого путем размещения общий обработчик событий на всех Div элементов, что-то вроде этого:

<div class="step_wrapper"> 
    <div id="step_box1"> 
     <span>Content of page 1</span> 
    </div> 
    <div id="step_box2"> 
     <span>Content of page 2</span> 
    </div> 
    <div id="step_box3"> 
     <span>Content of page 3</span> 
    </div> 
</div>

$(".step_wrapper div").click(function() { 
    $(this).addClass('active').siblings().removeClass('active'); 
});

Example fiddle

Обратите внимание на использование addClass()removeClass() /; лучше применять стили во внешней таблице стилей и изменять классные имена на элементах, а не изменять их встроенные стили напрямую.

источник

2016-01-28 08:01:50

Все, что вам нужно сделать, это изменить цвет фона выбранного step_box и сделать остальные прозрачные фоны:

<div class="step_wrapper"> 
 
    <div id="step_box1"> <span>Content of page 1</span> 
 
    </div> 
 
    <div id="step_box2"> <span>Content of page 2</span> 
 
    </div> 
 
    <div id="step_box2"> <span>Content of page 3</span> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script> 
 
$('.step_wrapper > div').click(function() { 
 
\t $this = $(this); 
 
    
 
    $this.css('background-color', 'red'); 
 
    $this.siblings().css('background-color', 'transparent'); 
 
}) 
 
</script>

источник

2016-01-28 08:04:58 Hybrid

<head> 
    <title>sample Page</title> 
<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 

    <style> 
     .red { 
     background-color:red; 
     } 

    </style> 
<script> 

    $(document).ready(function() { 

     $('.step_wrapper div').click(function() { 
      $('.step_wrapper div.red').removeClass('red') 
      $(this).addClass('red'); 
     }); 


    }); 


</script> 
</head> 
<body> 
    <div class="step_wrapper"> 
    <div id="step_box1"> <span>Content of page 1</span> 
    </div> 
    <div id="step_box2"> <span>Content of page 2</span> 
    </div> 
    <div id="Div1"> <span>Content of page 3</span> 
    </div> 
</div> 

</body> 
</html>

источник

2016-01-28 08:29:24 Aswathy

Simple CSS Solution

Это можно сделать несколькими строками CSS. Обратите внимание, что вы должны добавить атрибут tabindex к каждому DIV, чтобы он мог получать фокус. Это решение не требует javascript или библиотеки.

Запустите снимок ниже и нажмите на строки текста, чтобы увидеть, как он работает.

div:not(:focus) { background-color: none; color: black;} 
 
div:focus { background-color: red; color: white;}

<div> 
 
    <div tabindex=1> <span>Content of page 1</span></div> 
 
    <div tabindex=2> <span>Content of page 2</span></div> 
 
    <div tabindex=3> <span>Content of page 3</span></div> 
 
</div>

источник

2016-01-28 08:32:12 Roberto

Как изменить цвет нескольких div с помощью onclick

ответ

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