заменяя содержимое div одним щелчком мыши с помощью jquery

Question

Я вижу, что этот вопрос задавал много вопросов, но моя потребность кажется очень простой по сравнению с этими примерами, и, к сожалению, я все еще слишком новичок в js, чтобы знать, что удалить ... так что, рискуя быть этим, я собираюсь задать свой вопрос ...

Я пытаюсь отключить содержимое div в ящике в зависимости от нажатой кнопки. Сейчас я работаю с помощью функции animatedcollapse.toggle, но это выглядит не очень хорошо. Я хочу заменить его базовым угасанием при щелчке и исчезать в новом контенте на следующей кнопке.

Основная идея:

<div> 
<ul> 
<li><a href="this will fade in the first_div"></li> 
<li><a href="this will fade in the second_div"></li> 
<li><a href="this will fade in the third_div"></li> 
</ul> 
<div class="first_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
<div class="second_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
<div class="third_container"> 
<ul> 
    <li>stuff</li> 
    <li>stuff</li> 
    <li>stuff</li> 
</ul> 
</div> 
</div> 

У меня все работает с анимированным коллапсом, но это просто некрасиво эффект для этой ситуации, поэтому я хочу, чтобы изменить его.

Спасибо! Joel

Answer 1

Джоэл, я думаю, я понял, чего вы хотели. this look не так ли? В приведенном ниже коде я также использовал соглашение, в котором вы добавляете js к атрибуту class в HTML, чтобы вы могли по-разному форматировать ваши JS-биты. Если JS отключены, все три вкладки будут отображаться в порядке. Однако, пока JS включен, ваш код будет отображаться по желанию.

Вы можете улучшить это, динамически установив высоту #animators div на основе самой высокой высоты детей, но она становилась достаточно сложной, как это было!

Я немного изменил свой HTML (как для тестирования, так и для функциональности.):

<div> 
    <ul> 
    <li><a href="#">First</a></li> 
    <li><a href="#">Second</a></li> 
    <li><a href="#">Third</a></li> 
    </ul> 
    <div id="animators"> 
    <div class="container"> 
    <ul> 
     <li>stuff1</li> 
     <li>stuff1</li> 
     <li>stuff1</li> 
    </ul> 
    </div> 
    <div class="container"> 
    <ul> 
     <li>stuff2</li> 
     <li>stuff2</li> 
     <li>stuff2</li> 
    </ul> 
    </div> 
    <div class="container"> 
    <ul> 
     <li>stuff3</li> 
     <li>stuff3</li> 
     <li>stuff3</li> 
    </ul> 
    </div> 
    </div> 
</div> 

Добавьте это в CSS:

.js #animators { position: relative; height: 100px} 
.js #animators div.container { position: absolute; left: 0; top: 0 } 

И использовать этот JavaScript:

<script type="text/javascript"> 
    document.documentElement.className += " js"; // Add js class to the HTML element 
    $(function(){ 
    var $containers = $("#animators > div").hide(); 

    $('ul li a').each(function(i,el){ 
     var idx = i; 
     $(this).click(function(e){ 
     var $target = $containers.filter(':eq(' + idx + ')'); 
     // Fade out visible div 
     if($containers.filter(':visible').not($target).length){ 
      $containers.filter(':visible').fadeOut(); 
     } 
     // Fade in new div if not already showing 
     $target.not(':visible').fadeIn(); 
     e.preventDefault(); 
     }) 
    }) 
    }); 
</script> 

EDIT Вот альтернативный JavaScript блок, который fadesOutзатемfadesIn:

<script type="text/javascript"> 
    document.documentElement.className += " js"; // Add js class to the HTML element 
    $(function(){ 
    var $containers = $("#animators > div").hide(); 

    $('ul li a').each(function(i,el){ 
     var idx = i; 
     $(this).click(function(e){ 
     var $target = $containers.filter(':eq(' + idx + ')'); 
     // Fade out visible div 
     if($containers.filter(':visible').not($target).length){ 
      $containers.filter(':visible').fadeOut(1000, function(){ 
      $target.not(':visible').fadeIn(1000); 
      }); 
     } else { 
      $target.not(':visible').fadeIn(1000); 
     } 

     e.preventDefault(); 
     }) 
    }) 
    }); 
</script> 

Answer 2

Похоже, что тумблер поддерживает speed setting ... может быть, это было бы более элегантно?

Answer 3

Как насчет JQuery fade out - http://docs.jquery.com/Effects/fadeOut, а затем ваш обратный вызов является затухающим?

.. Я только что видел вашу ссылку в комментариях, это именно то, что они делают на трюках CSS. У вас есть более конкретный вопрос?

UPDATE Видимая класс относится к DIV, который будет виден ... не проверял это, но это должно быть около правой

$('.first_container').click(function(){ 
    $('.visible').fadeOut(3000,function(){ 
       this.removeClass('visible'); 
     $('.first_container').addClass('visible'); 
     $('.first_container').fadeIn(3000); 
    }); 
}) 

То есть код ссылки на свой first_container .. .. вы можете пойти оттуда

Answer 4

Если я понял ваш вопрос правильно, это может быть полезно для вас

<div id="LoadMe2"><h3>Please select what to edit!</h3></div> 
<script> 
$('a').click(function() { 
    $('#LoadMe2').load($(this).attr('href')); 

    return false; 
}); 
</script> 

и HTML может быть как

<a href="abc.php" style="text-decoration:none"><input type="button" value="edit Header menu"></a> 

EDIT

извините, это помогает вам для получения содержимого с этих страниц и отображения его. сохранить этот пост как кому-то еще может понадобиться