login  Naam:   Wachtwoord: 
Registreer je!
 Forum

tabblad

Offline Stefan14 - 18/05/2008 03:17 (laatste wijziging 18/05/2008 03:18)
Avatar van Stefan14PHP gevorderde Ik heb op een website 2 tabbladen voor het switchen tussen 2 website delen.

Nu wil ik dat het tabblad wat actief is te herkennen is, dit heb ik gedaan door deze een andere kleur te geven.
Dit werkt opzich prima, maar ik moet nu twee keer op het tabblad klikken vooraleer het actief wordt.

Ik heb een class in css aangemaakt voor geselecteerd en niet geselecteerd, de waarde hiervan onthoud ik in een session, probleem is echter dat deze session pas goed gezet wordt nadat de tabbladen zijn 'gemaakt' en dus moet de pagina eerst een keer gerefresht worden voordat deze verandering goed doorgevoerd wordt.
de session variabelen worden namelijk gezet op de pagina die opgeroepen wordt na klikken op het tabblad, en dus wordt eerst het bovenste deel van de layout gemaakt, daarna de content waaronder dus de geinclude pagina, en daarna de rest van de layout. In het bovenste deel zitten de tabbladen.

Ik wil uiteraard dat ze gelijk veranderen, maar hoe doe ik dit?

De css code:
php code - Bekijk de code zonder highlighting - Klap code in 
  1. a.selected{
  2. background-image:url(images/layout_images/selected.gif) !important; /*important voor de zekerheid*/
  3. }
  4. a.deselected{
  5. background-image:url(images/layout_images/deselected.gif) !important; /*important voor de zekerheid */
  6. }

4 antwoorden

Gesponsorde links
Offline TheVestel - 18/05/2008 07:55 (laatste wijziging 18/05/2008 07:56)
Avatar van TheVestel Onbekend Oke nu komt een heel lang script 

css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style type="text/css">
  2.  
  3. #tablist{
  4. padding: 3px 0;
  5. margin-left: 0;
  6. margin-bottom: 0;
  7. margin-top: 0.1em;
  8. font: bold 12px Verdana;
  9. }
  10.  
  11. #tablist li{
  12. list-style: none;
  13. display: inline;
  14. margin: 0;
  15. }
  16.  
  17. #tablist li a{
  18. padding: 3px 0.5em;
  19. margin-left: 3px;
  20. border: 1px solid #778;
  21. border-bottom: none;
  22. background: white;
  23. }
  24.  
  25. #tablist li a:link, #tablist li a:visited{
  26. color: navy;
  27. }
  28.  
  29. #tablist li a.current{
  30. background: lightyellow;
  31. }
  32.  
  33. #tabcontentcontainer{
  34. width: 400px;
  35. padding: 5px;
  36. border: 1px solid black;
  37. }
  38.  
  39. .tabcontent{
  40. display:none;
  41. }
  42.  
  43. </style>


javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2.  
  3. //[which tab (1=first tab), ID of tab content to display]:
  4. var initialtab=[1, "sc1"]
  5.  
  6.  
  7. function cascadedstyle(el, cssproperty, csspropertyNS){
  8. if (el.currentStyle)
  9. return el.currentStyle[cssproperty]
  10. else if (window.getComputedStyle){
  11. var elstyle=window.getComputedStyle(el, "")
  12. return elstyle.getPropertyValue(csspropertyNS)
  13. }
  14. }
  15.  
  16. var previoustab=""
  17.  
  18. function expandcontent(cid, aobject){
  19. if (document.getElementById){
  20. highlighttab(aobject)
  21. detectSourceindex(aobject)
  22. if (previoustab!="")
  23. document.getElementById(previoustab).style.display="none"
  24. document.getElementById(cid).style.display="block"
  25. previoustab=cid
  26. if (aobject.blur)
  27. aobject.blur()
  28. return false
  29. }
  30. else
  31. return true
  32. }
  33.  
  34. function highlighttab(aobject){
  35. if (typeof tabobjlinks=="undefined")
  36. collecttablinks()
  37. for (i=0; i<tabobjlinks.length; i++)
  38. tabobjlinks[i].style.backgroundColor=initTabcolor
  39. var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
  40. aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
  41. }
  42.  
  43. function collecttablinks(){
  44. var tabobj=document.getElementById("tablist")
  45. tabobjlinks=tabobj.getElementsByTagName("A")
  46. }
  47.  
  48. function detectSourceindex(aobject){
  49. for (i=0; i<tabobjlinks.length; i++){
  50. if (aobject==tabobjlinks[i]){
  51. tabsourceindex=i //s
  52. break
  53. }
  54. }
  55. }
  56.  
  57. function do_onload(){
  58. var cookiecheck=window.get_cookie && get_cookie(window.location.pathname).indexOf("|")!=-1
  59. collecttablinks()
  60. initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
  61. initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
  62. if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
  63. var cookieparse=get_cookie(window.location.pathname).split("|")
  64. var whichtab=cookieparse[0]
  65. var tabcontentid=cookieparse[1]
  66. expandcontent(tabcontentid, tabobjlinks[whichtab])
  67. }
  68. else
  69. expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
  70. }
  71.  
  72. if (window.addEventListener)
  73. window.addEventListener("load", do_onload, false)
  74. else if (window.attachEvent)
  75. window.attachEvent("onload", do_onload)
  76. else if (document.getElementById)
  77. window.onload=do_onload
  78.  
  79.  
  80. </script>
  81.  
  82.  
  83. <ul id="tablist">
  84. <li><a href="#" class="current" onClick="return expandcontent('sc1', this)"><font size="2" face="Verdana">Link
  85.   1</font></a></li>
  86. <li><a href="#" onClick="return expandcontent('sc2', this)" theme="#EAEAFF"><font size="2" face="Verdana">Link
  87.   2</font></a></li>
  88. <li><a href="#" onClick="return expandcontent('sc3', this)" theme="#FFE6E6"><font size="2" face="Verdana">Link
  89.   3</font></a></li>
  90. <li><a href="#" onClick="return expandcontent('sc4', this)" theme="#DFFFDF"><font size="2" face="Verdana">Link
  91.   4</font></a></li>
  92. <li><a href="#" onClick="return expandcontent('sc5', this)" theme="#FFCC66"><font size="2" face="Verdana">Link
  93.   5</font></a></li>
  94. </ul>
  95.  
  96. <DIV id="tabcontentcontainer">
  97.  
  98.     <div id="sc1" class="tabcontent" style="width: 400; height: 22">
  99.     <font size="2" face="Verdana">Hier komt de info van <a href="http://www.google.com" target="_blank">link
  100.     1</a>.<br />
  101.     </font>
  102.     </div>
  103.  
  104.     <div id="sc2" class="tabcontent">
  105.     <font size="2" face="Verdana">Dit komt er bij <a href="http://www.google.com" target="_blank">link
  106.     2</a> te staan</font>
  107.     </div>
  108.  
  109.     <div id="sc3" class="tabcontent">
  110.     <font size="2" face="Verdana">Wat er bij <a href="http://www.google.com" target="_blank">link
  111.     3</a> hoort komt hier</font>
  112.     </div>
  113.  
  114.     <div id="sc4" class="tabcontent">
  115.     <font size="2" face="Verdana">Bij de <a href="http://www.google.com" target="_blank">link
  116.     4</a>  komt dan dit te staan</font>
  117.     </div>
  118.  
  119.     <div id="sc5" class="tabcontent">
  120.     <font size="2" face="Verdana">Als laatste <a href="http://www.google.com" target="_blank">link
  121.     5</a> en zijn beschrijving</font>
  122.     </div>
  123.  
  124.  
  125. </DIV>
Offline JBke - 18/05/2008 09:06
Avatar van JBke PHP gevorderde LANGE STUKKEN CODE OP www.plaatscode.be AUB.
Offline Koen - 18/05/2008 10:30 (laatste wijziging 18/05/2008 10:58)
Avatar van Koen PHP expert http://plaatscode.be/8507/
http://plaatscode.be/8508/
Je hebt geluk dat ik me net verveelde 

titjes schreef:
Het goede werk van een trouwe fan! 
Offline TheVestel - 10/06/2008 17:22
Avatar van TheVestel Onbekend
sliphead schreef:
http://plaatscode.be/8507/
http://plaatscode.be/8508/
Je hebt geluk dat ik me net verveelde 

[..quote..]


Ik wil niet veel zeggen hoor... maar je hebt niet om mijn toestemming gevraagd ;)
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.223s