Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jak zrobić akcię na onClik'u, w js, jquery, aby ukrywał jednego div'a a pokazywał drugiego div'a?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
jak zrobić akcię na onClik'u, w js, jquery, aby ukrywał jednego div'a a pokazywał drugiego div'a?

Mam:

Ten div jest widoczny na początku.
<div id="title1">tu zawartość diva 1 </div>


<div id="title2" style="display: none;">tu zawartość diva 2 </div>


<a href="#" onClick="">Ukryj diva 1, a pokaż div 2</a>
!*!
http://api.jquery.com/toggle/

Przy prezentowaniu kodu, używaj odpowiednich znaczników.
johnny_b
Cześć,
pozwolę sobie skomentować post - opisać moje refleksje i propozycje smile.gif. Jest to mój drugi post, więc proszę o wyrozumiałość.

Nawiązując do pytania Marcus755 js/jquery jezeli chodziło o dwa różne rozwiązania to jquery rzeczywiście jest bardzo dobrą biblioteką, ale można też napisać własną prostą funkcję z jednym warunkiem. Rzeczywiście, jak w swoim kodzie napisałeś, operuje się na wartości cechy css - display.

Dla pliku CSS:
  1. #pierwszy{display:block;} <!--deklaracje wartości dla cechy display-->
  2. #drugi{display:none;}


Dla pliku HTML:
  1. <div id="pierwszy">a</div>
  2. <div id="drugi">b</div>
  3. <input type="button" value="podmien" onClick="sprawdzKtoryAktualnieJestWidocznyIpodmien();"> <!-- to rozwiązanie nie jest najlepsze, jeżeli chodzi o rozdzielenie html od js, lepiej zastosować EventListenera w kodzie JS-->



Dla pliku JS:
  1. function sprawdzKtoryAktualnieJestWidocznyIpodmien(){
  2.  
  3. if(window.getComputedStyle(document.getElementById('pierwszy')).getPropertyValue('display') == "block"){
  4.  
  5. document.getElementById('pierwszy').style.display = "none";
  6. document.getElementById('drugi').style.display = "block";
  7. }else{
  8. document.getElementById('drugi').style.display = "none";
  9. document.getElementById('pierwszy').style.display = "block";
  10. }}



pure js wink.gif oczywiście kod do dużej optymalizacji, jednak umożliwia bezpośrednie zastosowanie funkcjonalności JS bez użycia dodatkowych, sporych, bibliotek. Niestety nie wiem czemu na IE 9 nie działa - jeżeli wiecie czemu proszę o informacje. Pozdrawiam całą społeczność smile.gif
gr56
getComputedStyle nie działa w IE i dlatego właśnie korzystamy z tych "sporych" bibliotek.
johnny_b
Cytat(gr56 @ 14.12.2012, 19:42:02 ) *
getComputedStyle nie działa w IE i dlatego właśnie korzystamy z tych "sporych" bibliotek.


Dokładnie, tak. Zgadzam się również wiem i widzę, że nie działa smile.gif - ale jquery jakoś sobie z tym radzi, dlatego bardziej chodziło mi o opis metody w jaki sposób jquery "obsługuje" getComputedStyle w IE. Pozdrawiam
!*!
Cytat(gr56 @ 14.12.2012, 19:42:02 ) *
getComputedStyle nie działa w IE i dlatego właśnie korzystamy z tych "sporych" bibliotek.


Działa od IE<9 wink.gif

Pod wcześniejszymi można to imitować np. http://snipplr.com/view/13523/
johnny_b
Dzięki za komentarz, również przeglądałem podesłany wątek, ale nie testowałem na w/w przykładzie, więc ciężko mi się było odnieść do kodu. Ale grunt, że można problem rozwiązać "czystym" js. Pozdrawiam
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.