Показать сообщение отдельно
  #1 (permalink)  
Старый 01.07.2017, 16:20
Новичок на форуме
Отправить личное сообщение для skylink67 Посмотреть профиль Найти все сообщения от skylink67
 
Регистрация: 01.07.2017
Сообщений: 9

Изменить цвет при клике на блок
Как сделать так чтобы заголовок открытого блока был одного цвета, а закрытого другого?

<style type="text/css">
@charset "utf-8";
/* Файл стилей для работы 'Проектирование имиджа' */
.menu_container {
	margin: 0 auto;
	width:470px;
	font-family:arial;
}
.menu_container h2.acc_trigger {
	padding: 0;
	margin: 0 0 5px 0;
	height: 42px;
	line-height: 46px;
	font-size: 1.3em;
	font-weight: normal;
	display: block;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	border: 2px solid #ff0000;
	background: none;
	text-align: center;
}
.menu_container h2.acc_trigger a {
	color: green;
	text-decoration: none;
	display: block;
	padding: 0 0 0 5px;
	font-weight: bold;
	line-height: 42px;
}
.menu_container h2.acc_trigger a:hover {
	color: #32CD32;
}
div.menu_container h2.active {
	margin: 0;
	-webkit-border-bottom-right-radius: 0;
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomright: 0;
	-moz-border-radius-bottomleft: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0; 
	border-bottom: 1px dashed #ccc;
}
.menu_container .acc_container {
	margin: 0 0 5px; padding: 0;
	overflow: hidden;
	/*font-size: 1.2em;*/
	clear: both;
	border: 2px solid #ff0000;
	border-top: none;
	-webkit-border-bottom-right-radius: 7px;
	-webkit-border-bottom-left-radius: 7px;
	-moz-border-radius-bottomright: 7px;
	-moz-border-radius-bottomleft: 7px;
	border-bottom-right-radius: 7px;
	border-bottom-left-radius: 7px; 
}
.menu_container .acc_container .block {
	padding: 0px 15px;
}
.menu_container .acc_container .block p {
	padding: 0px 0;
	margin: 0px 0;
}
.menu_container .acc_container img, .ac_container img {
	float: left;
	margin: 10px 15px 15px 0;
	padding: 1px;
	background: #fff;
	border: 1px solid  #97be10;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.menu_container h3.ac_trigger {
	padding: 0;
	margin: 0 -7px 5px -7px;
	height: 30px;
	line-height: 30px;
	display: block;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #97be10;
}
.menu_container h3.ac_trigger a {
	display: block;
	padding: 0 0 0 30px;
}
</style>
<div class="menu_container"><!--начало container-->

    <h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>SMART WATCH GT08</strong></span></span></a></h2>
    <div class="acc_container">
        <div class="block">
<p><ul>
	<li><span style="font-size: 18px;"><span style="color: rgb(0, 0, 0);"><span style="font-family: Arial;">Производитель: &quot;Kingwear&quot;</span></span></span></li>
	<li><span style="font-size: 18px;">Беспроводная связь: GSM 850/900/1800/1900МГц, Bluetooth 3.0</span></li>
	<li><span style="font-size: 18px;">Тип экрана: 1,54-дюймовый экран, 240х240 px</span></li>
	<li><span style="font-size: 18px;">Интерфейс: английский, русский</span></li>
	<li><span style="font-size: 18px;">Процессор: MTK6260A&nbsp;</span></li>
	<li><span style="font-size: 18px;">Память: 128+64 Мбайт + поддержка MicroSD</span></li>
	<li><span style="font-size: 18px;">Батарея: Li-po 350mAh (хватает на 2-3 дня)</span></li>
	<li><span style="font-size: 18px;">Корпус: металл и пластик</span></li>
	<li><span style="font-size: 18px;">Камера: 2 Мп</span></li>
	<li><span style="font-size: 18px;">Масса: 62 гр.</span></li>
	<li><span style="font-size: 18px;">49 x 43 x 11 мм</span></li>
	<li><span style="font-size: 18px;">Гарантия: 12 месяца</span></li>
</ul></p>
        </div>
    </div>
                    
    <h2 class="acc_trigger"><a href="#"><span style="color: rgb(238, 29, 36);"><span style="font-size: 20px;"><strong>USB-ФЛЕШКА</strong></span></span></a></h2>
    <div class="acc_container">
        <div class="block">
<p><ul>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Интерфейс подключения: USB 3.0</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Объем памяти: 16 Гб</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Максимальная скорость записи: 30 Мбайт/с</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Максимальная скорость чтения: 130 Мбайт/с</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Защита паролем: Есть</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Материал корпуса: Металл</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Цвет: &nbsp;Черный, &nbsp;Серебристый</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Вес: 16 г</span></span>
		</span>
	</li>
	<li><span style="color: rgb(0, 0, 0);"><span style="font-size: 18px;"><span style="font-family: Arial;">Гарантия: 12 месяцев</span></span>
		</span>
	</li>
</ul>
</p>
        </div>
    </div>
Изображения:
Тип файла: jpg цвет.jpg (180.5 Кб, 1 просмотров)

Последний раз редактировалось skylink67, 01.07.2017 в 16:22.
Ответить с цитированием