jak zrobić akcię na onClik'u, w js, jquery, aby ukrywał jednego div'a a pokazywał drugiego div'a? Opcje

[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 . 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:

[HTML] pobierz, plaintext 
#pierwszy{display:block;} <!--deklaracje wartości dla cechy display-->
#drugi{display:none;}
[HTML] pobierz, plaintext 

Dla pliku HTML:

[HTML] pobierz, plaintext 
<div id="pierwszy">a</div>
<div id="drugi">b</div>
<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-->
[HTML] pobierz, plaintext 

Dla pliku JS:

[HTML] pobierz, plaintext 
function sprawdzKtoryAktualnieJestWidocznyIpodmien(){
 
	if(window.getComputedStyle(document.getElementById('pierwszy')).getPropertyValue('display') == "block"){
 
	          document.getElementById('pierwszy').style.display = "none";
	            document.getElementById('drugi').style.display = "block";
	}else{
	          document.getElementById('drugi').style.display = "none";
	            document.getElementById('pierwszy').style.display = "block";
	}}
[HTML] pobierz, plaintext 

pure js 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ść

Ten post edytował johnny_b 14.12.2012, 18:34:08

[gr56]

getComputedStyle nie działa w IE i dlatego właśnie korzystamy z tych "sporych" bibliotek.

[johnny_b]

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 - 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

[!*!]

getComputedStyle nie działa w IE i dlatego właśnie korzystamy z tych "sporych" bibliotek.

Działa od IE<9

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