Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: efekt zakładek w css
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
!*!
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"" ?
jarrod
  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
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.