Forum PHP.pl > [JavaScript] elementTagName w wybranym Id

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] elementTagName w wybranym Id

Volume

25.03.2010, 13:12:25

Próbuję zrobić w js takie coś żeby po kliknięciu na dany akapit <p> podświetlał się on na żółto a tekst znajdujący się w znaczniku span zmieniał kolor np. z zielonego na czerwony - i właśnie to nie wiem jak osiągnąć w JS mając dla każdego akapitu odpowiednie id (id="showX").

[HTML] pobierz, plaintext 
<html>
<head>
<style type="text/css">
p {
color: green;
}
</style>
<script type="text/javascript">
window.onload = showx; 
function showx()
{
  var getIdAndTagName = document.getElementById('all').getElementsByTagName('p');
  var getIdAndTagNameAndOne = getIdAndTagName.length+1;
  for(var i=1;i<getIdAndTagNameAndOne;i++) {
    document.getElementById('show'+i).onclick=function(){
       for(var x=1;x<getIdAndTagNameAndOne;x++) {
         document.getElementById('show'+x).style.background='none'; 
       }       
       this.style.background='yellow';
    };
  }
}
</script>
</head>
 
<body>
 
<div id="all">
  <p id="show1">asdasd <span>c</span></p>
  <p id="show2">asdsad <span>c</span></p>
  <p id="show3">asdsad <span>c</span></p>
  <p id="show4">asdsad <span>c</span></p>
  <p id="show5">asdsad <span>c</span></p>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Ps. kod js moze być niezbyt udany ale prosze o wyrozumiałość bo rzadko coś piszę w js (jak jestem zmuszony)... ale jeśli ktoś miałby lepsze rozwiązania to proszę o rady.

skowron-line

25.03.2010, 13:20:03

http://v3.thewatchmakerproject.com/journal...previoussibling
A nie możesz zmienić kolor dla p

kipero

25.03.2010, 13:21:36

Zrób sobie dwie klasy:

[CSS] pobierz, plaintext 
p.nieaktywna {
background: none;
}
p.nieaktywna span {
color: green;
}
 
p.aktywna {
background-color: yellow;
}
p.aktywna span {
color: red;
}
[CSS] pobierz, plaintext

Teraz zamiast podmieniać tło akapitu podmienisz klasę i wszystko będzie tak jak chcesz.

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.