id´s div´s & Ajax

  • id´s div´s & Ajax

    Hallo Liebe Leute,

    ich habe ein kleines Problemchen. Ich möchte gerne mein Menü auf meiner Website dynamisch anpassen. Unten seht ihr die aufzurufende Seite (content_leistungen) & das div (panel_content_inner). Die JS Funktionen habe ich halt in einer externen Datei. Die NAvigation an sich funktioniert problemlos. Mein Anliegen ist der Buttonstatus... ( id="homeon" <- bei aufruf der content_index.php) Hier wechselt die id je nach aktivität den status. Also wenn z.B jetzt "Leistungen" aufgerufen würde, soll die id"homeon" nurnoch "home" heissen. Ich brauche also Hilfe bei dem wechseln der id bzw. eines contentwechsels. Beim contentwechsel soll auch die id der buttons mitgeändert werden. Ich würde mich über jede Hilfe sehr freuen. Gruß aus oldenburg

    Quellcode

    1. <ul id="iconmenu">
    2. <li id="homeon"><a href="javascript:void(0)" onClick="open_url('content_index.php','panel_content_inner');"title="Startseite"></a></li>
    3. <li id="leistungen"><a href="javascript:void(0)" onClick="open_url('content_leistungen','panel_content_inner');"title="Leistungen"></a></li>

  • mal ne frage: wie oft änderst du deine navigation, dass die dynamisch nachgeladen werden muss???
    sicher, dass ajax hier das richtige ist?

    eine element id würde ich auf keinen fall dynamisch ändern.
    wenn du den status erkennen willst, dann setze lieber lokal eine variable..
    und wenn du es unbedingt ins design schreiben willst, dann nimm dir lieber ein anderes attribut wie z.B. classname, lang, title, ...

    http://de.selfhtml.org/javascript/objekte/all.htm#title

    Quellcode

    1. if(document.getElementById('home').title == 'on')
    2. ...
    4. <li id="home" title="on">

  • Hey, danke für die schnelle Antwort. Also ich erstelle das Menu über ein Bild.

    Das sieht folgendermaßen aus...

    css

    Quellcode

    1. #nav {
    2. /* background-color: #2e7bb3; */
    3. background: url(../images/logo.jpg) no-repeat;
    4. background-position: 0px 50px;
    5. display: block;
    6. margin: 0px auto;
    7. padding: 0px;
    8. height: 100px;
    9. width: 780px;
    10. }
    11. #iconmenu {
    12. /* position: absolute;
    13. top: 55px;
    14. left: 400px; */
    15. float: right;
    16. clear: both;
    17. margin-top: 15px;
    18. margin-right: 5px;
    19. padding: 0px;
    20. width: 520px;
    21. height: 40px;
    22. }
    23. #iconmenu li {
    24. display: block;
    25. float: left;
    26. /* position: absolute;
    27. top: 0px; */
    28. width: 65px;
    29. height: 40px;
    30. list-style: none;
    31. background: url(../images/navigation.jpg) 0 0 no-repeat;
    32. }
    33. #iconmenu a {
    34. display: block;
    35. width: 65px;
    36. height: 40px;
    37. border: none;
    38. }
    39. #iconmenu #home { left: 0px; background-position: 0px -20px; }
    40. #iconmenu #leistungen { left: 65px; background-position: -65px -20px; }
    41. #iconmenu #aktuell { left: 130px; background-position: -130px -20px; }
    42. #iconmenu #referenzen { left: 195px; background-position: -195px -20px; }
    43. #iconmenu #impressum { left: 260px; background-position: -260px -20px; }
    44. #iconmenu #kontakt { left: 325px; background-position: -325px -20px; }
    45. #iconmenu #helpdesk { left: 390px; background-position: -390px -20px; }
    46. #iconmenu #livedemo { left: 455px; background-position: -455px -20px; }
    48. #iconmenu #homeon { left: 0px; background-position: 0px -85px; }
    49. #iconmenu #hostingon { left: 65px; background-position: -65px -85px; }
    50. #iconmenu #aktuellon { left: 130px; background-position: -130px -85px; }
    51. #iconmenu #referenzenon { left: 195px; background-position: -195px -85px; }
    52. #iconmenu #impressumon { left: 260px; background-position: -260px -85px; }
    53. #iconmenu #kontakton { left: 325px; background-position: -325px -85px; }
    54. #iconmenu #helpdeskon { left: 390px; background-position: -390px -85px; }
    55. #iconmenu #livedemoon { left: 455px; background-position: -455px -85px; }
    57. #iconmenu #home a:hover { background: url(../images/navigation.jpg) 0px -85px no-repeat; }
    58. #iconmenu #leistungen a:hover { background: url(../images/navigation.jpg) -65px -85px no-repeat; }
    59. #iconmenu #aktuell a:hover { background: url(../images/navigation.jpg) -130px -85px no-repeat; }
    60. #iconmenu #referenzen a:hover { background: url(../images/navigation.jpg) -195px -85px no-repeat; }
    61. #iconmenu #impressum a:hover { background: url(../images/navigation.jpg) -260px -85px no-repeat; }
    62. #iconmenu #kontakt a:hover { background: url(../images/navigation.jpg) -325px -85px no-repeat; }
    63. #iconmenu #helpdesk a:hover { background: url(../images/navigation.jpg) -390px -85px no-repeat; }
    64. #iconmenu #livedemo a:hover { background: url(../images/navigation.jpg) -455px -85px no-repeat; }
    Alles anzeigen


    Das ist meine Navigation. Darum brauche ich den wechsel der id, da sich die farbe des ausgewählten Menüpunktes auf die Art ändert. Ist mal ein etwas anderes Menu ;) Gruß