Скрыть конкретную загрузку div и затем показать div после щелчка

У меня есть два div div1 и div2. Я хочу, чтобы div2 автоматически скрывался, но когда я нажимаю на preview div, тогда div2 становится видимым и div1 скрывается. Это код, который я пробовал, но не повезло: (

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
  $("#preview").click(function() {
    $("#div1").hide();
    $("#div2").show();
  });
});
</script>

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>

Ответы

Ответ 1

Обязательно наблюдайте за своими селекторами. Кажется, вы забыли # для div2. Кроме того, вы можете переключать видимость многих элементов одновременно с помощью .toggle():

// Short-form of `document.ready`
$(function(){
    $("#div2").hide();
    $("#preview").on("click", function(){
        $("#div1, #div2").toggle();
    });
});

Демо: http://jsfiddle.net/dJg8N/

Ответ 2

Это более простой способ сделать это. Надеюсь, это поможет...

<script type="text/javascript">
$(document).ready(function () {
    $("#preview").toggle(function() {
        $("#div1").hide();
        $("#div2").show();
    }, function() {
        $("#div1").show();
        $("#div2").hide();
    });
});

<div id="div1">
This is preview Div1. This is preview Div1.
</div>

<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>

<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>

Если вы хотите, чтобы div был скрыт при загрузке, сделайте стиль display: none
Используйте функцию переключения, а не щелчка.

Ссылки:

Учебники JQuery

http://docs.jquery.com/Main_Page
http://www.w3schools.com/jquery/default.asp (W3Schools)
http://thenewboston.org/list.php?cat=32 (видеоуроки)
http://andreehansson.se/the-basics-of-jquery/ (основное учебное пособие)

Ссылки на JQuery

Ответ 3

Вам не хватает символа хеша # перед выборами идентификаторов, это должно работать:

$(document).ready(function() {
    $("#div2").hide();

    $("#preview").click(function() {
      $("#div1").hide();
      $("#div2").show();
    });

});

Подробнее о jQuery ID Selectors

Ответ 4

$(document).ready(function() {
    $('#div2').hide(0);
    $('#preview').on('click', function() {
        $('#div1').hide(300, function() { // first hide div1
            // then show div2
            $('#div2').show(300);
        });     
    });
});

Вы пропустили # до div2

Рабочий пример

Ответ 5

Во второй раз, когда вы ссылаетесь на div2, вы не используете селектор # id.

Нет элемента с именем div2.