выделение активных пунктов меню

23.05.2013, 18:48. **Показов** 1101. **Ответов** 3

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

вот код http://jsbin.com/unudug/2/edit

нужен алгоритм(3 блока) блок на котором 1 клик - меняет цвет на красный, 2 клика - открывается.
Остаются два неактивных блока, клик на один из них, он принимает красный цвет(они между собой активный/неактивный), жмем два раза, закрывается старый блок, открывается новый

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('div').click(function(){
    $('div').removeClass('active');
    $(this).addClass('active');
 })
 .dblclick(function(){
    $(this).animate({backgroundColor: "green"}).delay(500).transition({x:'400px',y:'150px',rotate:'-360deg'},1000).animate({width: "400px"},300);
 }); //http://ricostacruz.com/jquery.transit/
 
});/*end  ready*/
</script>
</head>
<style>
    div:first-child {
        left:230px;
    }
    div {
        width:200px;
        height:100px;
        background:rgba(230,210,210,1);
        margin: 10px;
        position:absolute;
    }
    div:last-child {
        left:450px;
    }
    .active {
        background: #aa0000;
    }
</style>
<body>
  
    <div>
    </div>
    <div>
    </div>
    <div>
    </div>
  
</body>
</html>

@and_y87 · 24.05.2013, 10:05

Так было бы логичней (использовать переменные и обёртку)

Javascript

 var megaBlock = "#wrapper div" ;
$( megaBlock )
  .on( 'click', function(){
    var cls = 'active' ;
    $( megaBlock ).removeClass(cls);
    $( this ).addClass( cls ) ;
  })
  .on( 'dblclick', function(){
    $( megaBlock ).hide();
    $( this ).show();
  })

А с твоим кодом что не так ?

@Forastero · 24.05.2013, 14:38

and_y87,

Сообщение от and_y87

var megaBlock = "#wrapper div" ;

Только зачем сначала значение помещать в строку и затем по этой строке делать выборку?
Это ничуть не быстрее, а даже наоборот. Правильно это делается вот так:

Javascript

 var megaBlock = $('#wrapper').find('div') ;
    megaBlock
  .on( 'click', function(){
    $(megaBlock).removeClass('active');
    $(this).addClass('active') ;
  })
  .on('dblclick', function(){
    $(megaBlock).hide();
    $(this).show();
  })

@and_y87 · 24.05.2013, 14:40

SoraxWeb, Буду знать... что так быстрей... я то имел ввиду саму логику... а не то как быстрей...

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 94
	24.05.2013, 14:40	4
	SoraxWeb, Буду знать... что так быстрей... я то имел ввиду саму логику... а не то как быстрей... 0