Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Skrypt menu - mały problem
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
Isuu
Witam wszystkich użytkowników forum. Mam taki problem, napisałem skrypt do mojego menu na stronie, wszystko działa tylko nie wiem jak zrobić, żeby po kliknięciu w któryś z 4 elementów ten kliknięty robił się jako aktywny (czcionka na czarno i podkreślenie grubsze). Oto skrypt, pomożecie?
  1. <script type="text/javascript">
  2. var $j = jQuery.noConflict();
  3. $j(document).ready(function(){
  4. $j("#about-button").hover(function(){
  5. $j(this).animate({
  6. opacity: 1.0,
  7. borderBottom: "5px solid #23bd05"
  8. }, 200 );
  9.  
  10.  
  11.  
  12. $j("#home-button").animate({
  13. opacity: 0.5,
  14. borderWidth: 1
  15. }, 50 );
  16.  
  17. $j("#portfolio").animate({
  18. opacity: 0.5,
  19. borderWidth: 1
  20. }, 50 );
  21.  
  22. $j("#blog").animate({
  23. opacity: 0.5,
  24. borderWidth: 1
  25. }, 50 );
  26.  
  27. });
  28. });
  29. </script>
  30. <script type="text/javascript">
  31. var $j = jQuery.noConflict();
  32. $j(document).ready(function(){
  33. $j("#portfolio").hover(function(){
  34. $j(this).animate({
  35. opacity: 1.0,
  36. borderBottom: "5px solid #23bd05"
  37.  
  38. }, 200 );
  39.  
  40.  
  41.  
  42. $j("#home-button").animate({
  43. opacity: 0.5,
  44. borderWidth: 1
  45. }, 50 );
  46.  
  47. $j("#about-button").animate({
  48. opacity: 0.5,
  49. borderWidth: 1
  50. }, 50 );
  51.  
  52. $j("#blog").animate({
  53. opacity: 0.5,
  54. borderWidth: 1
  55. }, 50 );
  56.  
  57. });
  58. });
  59. </script>
  60. <script type="text/javascript">
  61. var $j = jQuery.noConflict();
  62. $j(document).ready(function(){
  63. $j("#blog").hover(function(){
  64. $j(this).animate({
  65. opacity: 1.0,
  66. borderBottom: "5px solid #23bd05"
  67.  
  68. }, 200 );
  69.  
  70.  
  71.  
  72. $j("#home-button").animate({
  73. opacity: 0.5,
  74. borderWidth: 1
  75. }, 50 );
  76.  
  77. $j("#about-button").animate({
  78. opacity: 0.5,
  79. borderWidth: 1
  80. }, 50 );
  81.  
  82. $j("#portfolio").animate({
  83. opacity: 0.5,
  84. borderWidth: 1
  85. }, 50 );
  86.  
  87. });
  88. });
  89. </script>
  90. <script type="text/javascript">
  91. var $j = jQuery.noConflict();
  92. $j(document).ready(function(){
  93. $j("#home-button").hover(function(){
  94. $j(this).animate({
  95. opacity: 1.0,
  96. borderBottom: "5px solid #23bd05"
  97.  
  98. }, 200 );
  99.  
  100.  
  101.  
  102. $j("#portfolio").animate({
  103. opacity: 0.5,
  104. borderBottom: "1px solid #cdcccc"
  105. }, 50 );
  106.  
  107. $j("#about-button").animate({
  108. opacity: 0.5,
  109. borderBottom: "1px solid #cdcccc"
  110. }, 50 );
  111.  
  112. $j("#blog").animate({
  113. opacity: 0.5,
  114. borderBottom: "1px solid #cdcccc"
  115. }, 50 );
  116.  
  117. });
  118. });
  119. </script>
kamil4u
Wrzuć demo online smile.gif
Isuu
Nie mam pojęcia jak to zrobić. Tam nic więcej nie ma, tylko css dla tego menu. Ktoś zna rozwiązanie?

To będzie coś z funkcją .onclick tak?
com
demo tego co już masz, żebyśmy wiedzieli jak to dokładnie ma działać smile.gif
Isuu
Tak, tylko chodzi o to, że nie mam pojęcia jak wrzucić demo samego menu.
kamil4u
Masz jakąś tam stronę. Teraz szukasz serwera, na który możesz wrzucić pliki( może być jakiś darmowy ) i wrzucasz do niego pliki i dajesz nam link. W necie są dziesiątki poradników jak wrzucić pliki na serwer. Powodzenia
Isuu
Stronę mam tongue.gif Chciałem wrzucić demo samo menu, ale ok, podeślę całą stronkę.
http://fotisu.pl/
I teraz chodzi mi o to, żeby w menu po kliknięciu w np. "O mnie" i po przejściu na tą podstronę, to "O mnie" było pogrubione, a reszta na szaro.
Pomoże ktoś?
kamil4u
Za pomocą JS odczytujesz adres aktualnej strony i np. jak znajduje się tam ciąg "about" to pogrubiasz element "o mnie", itd.

Ale mimo wszystko poprawniej to zrobić w PHP - na tej samej zasadzie
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.