Лучшая техника Swap divs - PullRequest
Новая
       10

Лучшая техника Swap divs

1 голос
/ 15 октября 2011

Итак, вот что я пытаюсь сделать.Сначала у меня будет около 8 или около того изображений на левой стороне страницы и около 8 делений на правой стороне.Теперь, когда человек нажимает на изображение, я хочу, чтобы текущий div «скрыл» и был заменен другим div, с которым связано это изображение.

Например: я нажимаю 2-е изображение, и правая сторона изменяется... затем я нажимаю 4-е изображение ... правая сторона заменяется на div, связанный с этим изображением, а содержимое, которое было связано со 2-м изображением, скрывается ... etc

Я пыталсяиспользуйте функцию Jquery Toggle, но, похоже, это вызывает у меня проблемы, и я могу использовать ее неправильно.Хотелось бы знать, является ли это даже способом пойти ... Есть ли более простой способ, который поможет мне получить то же самое?

Вот мой текущий URL для проверки этого, прежде чем я построю реальную вещь:
http://dtrot55.justinsonline.com/testing/thinkfirst-test/Untitled-1.html

Ответы [ 2 ]

1 голос
/ 15 октября 2011

Это будет работать, если вы настроите это так ... Кроме того, это минимальный стиль ... Как раз то, что вам нужно, чтобы функциональность работала.

HTML 

<div id="mainContent">
   <div id="thumbs">
       <a href="#content1">Content1</a>
       <a href="#content2">Content2</a>
       <a href="#content3">Content3</a>
   </div>

   <div id="contentWrap">
      <div id="content1">
          <p>Content 1</p>
      </div>
      <div id="content2">
          <p>Content 2. Content 2. Content 2</p>
      </div>
      <div id="content3">
          <p>Content 3 information goes here. Content 3 information goes here. Content 3 information goes here</p>
      </div>
  </div>

</div>

CSS 

#contentWrap { position: relative; }

#contentWrap div { position: absolute; left:0; top:0; }

jQuery 

$(function() {
    $('#contentWrap div').hide();
    $('#contentWrap div:first').show();
    $('#thumbs a:first').addClass('active');

    $('#thumbs a').click(function() {
        if ($(this).hasClass('active') == true) {
            return false;
        }
        else {
            $('a.active').removeClass('active');
            $(this).addClass('active');

            $('#contentWrap div').fadeOut();
            var contentToLoad = $(this).attr('href');
            $(contentToLoad).fadeIn();

            return false;
        }
    });
});

Редактировать Объяснение: Обычно при загрузке страницы.Строка 1 говорит, чтобы скрыть все содержимое Div.Строка 2 говорит, чтобы показать первый Content Div внутри ContentWrap.В строке 3 указывается класс для первого якоря Thumb.

Теперь перейдем к функции щелчка.Давайте на секунду представим, что оператора if нет, и единственный код, выполняемый для функции click, находится в блоке else.Первая строка удаляет класс «активный» из всех якорей большого пальца.Вторая строка добавляет класс «активный» к якору большого пальца, который вы только что нажали.Следующая строка затеняет все видимые элементы содержимого внутри элемента ContentWrap.В следующей строке создайте переменную, основанную на значении href ссылки, по которой вы только что щелкнули (которая является идентификатором содержимого, которое вы хотите загрузить).С идентификатором в качестве переменной, теперь он готов к использованию в качестве селектора.В следующей строке используется переменная для выбора элемента Content, который вы хотите загрузить, и его постепенного добавления. Последняя строка запрещает выполнение ссылки.

Почему существует оператор if, else.В первой части инструкции if просто говорится, что если якорь Thumb, на который вы щелкаете, имеет класс active, не загружайте контент.Если этого не произойдет, загрузите содержимое.

0 голосов
/ 15 октября 2011

Первое, что я увидел, было то, что вы используете toggle на $("#toggle") дважды и никогда не применяете его к $("#toggle3").

...