Привет всем. Появилась задачка небольшая, впринципе нашел решение..но хочется как то упростить код.
Задача: Создать карту с нанесенными на нее метками. Я создал примитивный макет (Серое поле - это типа карта, красные зеленые и синие дивы на этой карте - это типа метки). Также есть небольшая менюшка для скрытия\отображения меток. Тобишь при клике на ссылку "Красный" скрываются(отображаются) красные метки, при клике на ссылку "Зеленый" скрываются(отображаются) зеленые метки и т.д.
вот мой код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.6.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('a.one').click(
function(){
var elem = $('div.one');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});
$('a.two').click(
function(){
var elem = $('div.two');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});
$('a.three').click(
function(){
var elem = $('div.three');
if(elem.is(":hidden")){
elem.show();
}
else{
elem.hide();
}
});
});
</script>
<style type="text/css">
div.map {
width:200px;
height:200px;
position: relative;
background:#CCC;
}
div.map div {
width:10px;
height:10px;
position: absolute;
}
div.one {
background:#0F0;
}
div.two {
background:#F00;
}
div.three {
background: #00F;
}
</style>
</head>
<body>
<div class="map">
<div class="one" style="top:10px; left:10px;"></div>
<div class="one" style="top:30px; left:30px;"></div>
<div class="one" style="top:50px; left:10px;"></div>
<div class="two" style="top:10px; left:30px;"></div>
<div class="two" style="top:30px; left:10px;"></div>
<div class="two" style="top:50px; left:30px;"></div>
<div class="three" style="top:50px; left:50px;"></div>
</div>
<div class="menu">
<a class="one" href="#">Зеленый</a><br />
<a class="two" href="#">Красный</a><br />
<a class="three" href="#">Синий</a>
</div>
</body>
</html>
Код работает...НО! если обратить внимание на код JAVASCRIPT то любой уважающий себя программист скажет что это не совсем удобно...Сделать как то надо чтобы при нажатии на ссылку в <DIV CLASS="MENU"> функция javascript сама чтобы определила CLASS у этой ссылки, нашла DIV с таким же классом и скрыла его....
Вот как это сделать ребят?! я не могу сообразить...подскажите..мо ет кто сталкивался с подобной проблемой?!