|
Сообщение от demqn
|
|
для подстветки?
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.active{background: #FFE4B5;}
div.blocks{display:none; width:600px;height:200px;float:left;}
#one{background-color: green}
#two{background-color: pink}
#three{background-color: blue}
div.but{display:block; width:200px; height:100px; float:left; border:1px solid #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function show_hide(event,elem){
$('.blocks').not(elem).hide();
$(elem).toggle();
$('.but').not(event.target).removeClass('active');
$(event.target).toggleClass('active');
}
</script>
</head>
<body>
<div class="but" onclick="show_hide(event,'#one')">кнопка включения и выключения первого блока</div>
<div class="but" onclick="show_hide(event,'#two')">кнопка включения и выключения второго блока</div>
<div class="but" onclick="show_hide(event,'#three')">кнопка включения и выключения третьего блока</div>
<div style="clear:both;"></div>
<div class="blocks" id="one">one</div>
<div class="blocks" id="two">two</div>
<div class="blocks" id="three">three</div>
</body>
</html>