Я пытаюсь заставить 2 вещи исчезать, одна, когда одна ссылка выбрана, другая, когда другая ссылка выбрана? - PullRequest
Новая
       4

Я пытаюсь заставить 2 вещи исчезать, одна, когда одна ссылка выбрана, другая, когда другая ссылка выбрана?

1 голос
/ 26 января 2011

Да, у меня есть 4 деления, я хочу, чтобы 1 и 3 исчезали при нажатии на ссылку, а 2 и 4 - при нажатии на другую кнопку. Я использую JQuery. Вот что у меня так далеко: 

<div id="video selector" style="float: right; width: 250px; background-color:#f3f3f3; height: 210px; margin-bottom:13px;">
<a href="#">
  <script>
     $(document.body).click(function () { 
         $("#1").fadeIn("slow"); 
         $("#3").fadeIn("slow"); 
         $("#2").hide();  
         $("#4").hide();
      });
  </script>
  <img src="img/electronic recycling play.png" style="width:220px; padding-left:15px; padding-top:12px; padding-bottom:9px; cursor:pointer;" />
  </a>
  <center>Electronic Recycling</font></center>
  </div>

Этот загружает div 1 и 3. 

<div id="video selector2" style="float: right; width: 250px; background-color:#f3f3f3; height: 210px;">
 <a href="#">
   <script>
         $(document.body).click(function () { 
            $("#2").fadeIn("slow"); 
            $("#4").fadeIn("slow"); 
            $("#1").hide();  
            $("#3").hide();
         });
    </script>
    <img src="img/battery recycling play.png" style="width:220px; padding-left:15px; padding-top:12px; padding-bottom:9px; cursor:pointer;" />
    </a><center>Battery Recycling</font></center>
  </div>

Этот загружает div 2 и 4.

Проблема в том, что они оба загружают одни и те же div (2 и 4), и видео не переключается, просто перезагружается один и тот же, при нажатии кнопки ... какие-нибудь идеи?

1 Ответ

2 голосов
/ 26 января 2011

Добавьте идентификатор к вашему тегу следующим образом: 

  <a href="#" id="firstlink"> ... </a>

Затем в функцию готовности документа добавьте обработчик события щелчка следующим образом: 

  <script>
 $(document).ready(function () {
     $("#firstlink").click(function(){ 
     $("#1").fadeIn("slow"); 
     $("#3").fadeIn("slow"); 
     $("#2").hide();  
     $("#4").hide();
   });
  });
</script>

Код выше может идтив заголовке вашей страницы, а не в содержимом тега.Он добавляет обработчик событий таким образом, чтобы при щелчке тега с идентификатором firstlink выполнялась функция.Аналогичную функцию можно выполнить для следующей ссылки.

...