Блог

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

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

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

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

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

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 указано скрыть все разделы содержимого. В строке 2 говорится, что нужно показать первый раздел содержимого внутри ContentWrap. Строка 3 объявляет класс первому привязке большого пальца.

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

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

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