Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> efekt zakładek w css
!*!
post
Post #1





Grupa: Zarejestrowani
Postów: 4 298
Pomógł: 447
Dołączył: 16.11.2006

Ostrzeżenie: (0%)
-----


znalazłem cos takiego:

  1. <style type="text/css">
  2.  
  3. /*Credits: Dynamic Drive CSS Library */
  4.  
  5. .shadetabs{
  6. border-bottom: 1px solid gray;
  7. /* width: 90%; width of menu. Uncomment to change to a specific width */
  8. margin-bottom: 1em;
  9. }
  10.  
  11. .shadetabs ul{
  12. padding: 3px 0;
  13. margin-left: 0;
  14. margin-top: 1px;
  15. margin-bottom: 0;
  16. font: bold 12px Verdana;
  17. list-style-type: none;
  18. text-align: left; /*set to left, center, or right to align the menu as desired*/
  19. }
  20.  
  21. .shadetabs li{
  22. display: inline;
  23. margin: 0;
  24. }
  25.  
  26. .shadetabs li a{
  27. text-decoration: none;
  28. padding: 3px 7px;
  29. margin-right: 3px;
  30. border: 1px solid #778;
  31. color: #2d2b2b;
  32. background: white url(media/shade.gif) top left repeat-x;
  33. }
  34.  
  35. .shadetabs li a:visited{
  36. color: #2d2b2b;
  37. }
  38.  
  39. .shadetabs li a:hover{
  40. text-decoration: underline;
  41. color: #2d2b2b;
  42. }
  43.  
  44. .shadetabs li.selected{
  45. position: relative;
  46. top: 1px;
  47. }
  48.  
  49. .shadetabs li.selected a{ /*selected main tab style */
  50. background-image: url(media/shadeactive.gif);
  51. border-bottom-color: white;
  52. }
  53.  
  54. .shadetabs li.selected a:hover{ /*selected main tab style */
  55. text-decoration: none;
  56. }
  57.  


oraz w pliku html daje:

  1. <div class="shadetabs">
  2. <ul>
  3. <li><a href="#">Home</a></li>
  4. <li><a href="#">DHTML</a></li>
  5. <li class="selected"><a href="#">CSS</a></li>
  6. <li><a href="#">Forums</a></li>
  7. <li><a href="#">Gif Optimizer</a></li>
  8. </ul>
  9. </div>



jest to prosty spsoob na wyświetlenie zakładek, ale jak zrobić aby po kliknięciu np. w Forums zakladka automatycznie zmieniła wartość na "class="selected"" ?


--------------------
Nie udzielam pomocy poprzez PW i nie mam GG.
Niektóre języki programowania, na przykład C# są znane z niezwykłej przenośności (kompatybilność ze wszystkimi wersjami Visty jest wiele warta).
Go to the top of the page
+Quote Post
jarrod
post
Post #2





Grupa: Zarejestrowani
Postów: 312
Pomógł: 9
Dołączył: 14.10.2006
Skąd: warszawa

Ostrzeżenie: (0%)
-----


  1. <li><a onclick="this.parentNode.className='selected'" href="#">Gif Optimizer</a></li>


To jest jak oznaczyć przez klasę. Ale aby odznaczyć już lepiej napisać sobie funkcję która wyszuka zaznaczony i usunie zaznaczenie.
Polecam: google.pl W necie jest takich skryptów na max. Zrestą wystarczy trochę poczytać o JS i sam sobie napiszesz winksmiley.jpg

Ten post edytował jarrod 21.11.2006, 19:41:54
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 19.08.2025 - 15:33