1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Wie kann ich einen aktiven Menüpunkt hervorheben?

Dieses Thema im Forum "HTML & XHTML" wurde erstellt von Rocco95, 23. September 2017.

  1. Rocco95

    Rocco95 Grünschnabel

    Nabend, :)

    ich habe erst vor ein paar tagen mit HTML angefangen rumzuspielen.
    Ich wollte mir mein erstes Menü basteln jedoch komme ich jetzt leider nicht mehr weiter und hoffe ihr könnt mir weiter helfen.

    Mein Menü sieht aktuell so aus:
    [​IMG]

    Über die oberen 3 Button lasse ich die bestimmte Menüpunkte anzeigen. Unter
    Info
    --> Home
    --> News
    --> Forum

    Clan
    --> Teams
    --> ... usw

    Ich hätte gern wenn ich auf Info klicke das Info wie auf dem dritten Bild blau bleibt bis ich wieder in ein anderes Menü wechsel.
    Leider habe ich dazu nichts im Internet gefunden bzw ich weiß auch nicht nach was ich da genau suchen muss.

    Hier noch mein Code:

    Code (HTML5):
    1.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    2.     <script>
    3.         function clickBtn1() {
    4.             $('#b-home').show();
    5.             $('#b-news').show();
    6.             $('#b-forum').show();
    7.             $('#b-teams').hide();
    8.             $('#b-member').hide();
    9.             $('#b-server').hide();
    10.             $('#b-clanwars').hide();
    11.             $('#b-ts').hide();
    12.             $('#b-csgo').hide();
    13.         }
    14.          
    15.         function clickBtn2() {
    16.             $('#b-home').hide();
    17.             $('#b-news').hide();
    18.             $('#b-forum').hide();
    19.             $('#b-teams').show();
    20.             $('#b-member').show();
    21.             $('#b-clanwars').show();
    22.             $('#b-server').hide();
    23.             $('#b-ts').hide();
    24.             $('#b-csgo').hide();
    25.         }
    26.          
    27.         function clickBtn3() {
    28.             $('#b-home').hide();
    29.             $('#b-news').hide();
    30.             $('#b-forum').hide();
    31.             $('#b-teams').hide();
    32.             $('#b-member').hide();
    33.             $('#b-clanwars').hide();
    34.             $('#b-server').show();
    35.             $('#b-ts').show();
    36.             $('#b-csgo').show();
    37.         }
    38.  
    39.  
    40. <div id="buttons">
    41.                     <!-- Navigation Buttons -->
    42.                     <input type="image" src="images/menu/bn-server.png" onMouseOver="this.src='images/menu/bn-server-h.png'" onMouseOut="this.src='images/menu/bn-server.png'" name="Server" onClick="clickBtn3()">
    43.                     <input type="image" src="images/menu/bn-clan.png" onMouseOver="this.src='images/menu/bn-clan-h.png'" onMouseOut="this.src='images/menu/bn-clan.png'" name="Clan" onClick="clickBtn2()">
    44.                     <input type="image" src="images/menu/bn-info.png" onMouseOver="this.src='images/menu/bn-info-h.png'" onMouseOut="this.src='images/menu/bn-info.png'" name="Info" onClick="clickBtn1()">
    45.                    
    46.                    
    47.                    
    48.                     <!-- Navigation INFO -->
    49.                     <div id="b-home"
    50.                    <a href="#">
    51.                         <img src="images/menu/b-home.png" onMouseOver="this.src='images/menu/b-home-h.png'" onMouseOut="this.src='images/menu/b-home.png'">
    52.                     </a></div>
    53.                     <div id="b-news"
    54.                    <a href="#">
    55.                         <img src="images/menu/b-news.png" onMouseOver="this.src='images/menu/b-news-h.png'" onMouseOut="this.src='images/menu/b-news.png'">
    56.                     </a></div>
    57.                     <div id="b-forum"
    58.                    <a href="#">
    59.                         <img src="images/menu/b-forum.png" onMouseOver="this.src='images/menu/b-forum-h.png'" onMouseOut="this.src='images/menu/b-forum.png'">
    60.                     </a></div>
    61.                    
    62.                    
    63.                     <!-- Navigation CLAN -->
    64.                     <div id="b-teams"
    65.                    <a href="#">
    66.                         <img src="images/menu/b-teams.png" onMouseOver="this.src='images/menu/b-teams-h.png'" onMouseOut="this.src='images/menu/b-teams.png'">
    67.                     </a></div>
    68.                     <div id="b-member"
    69.                    <a href="#">
    70.                         <img src="images/menu/b-member.png" onMouseOver="this.src='images/menu/b-member-h.png'" onMouseOut="this.src='images/menu/b-member.png'">
    71.                     </a></div>
    72.                     <div id="b-clanwars"
    73.                    <a href="#">
    74.                         <img src="images/menu/b-clanwars.png" onMouseOver="this.src='images/menu/b-clanwars-h.png'" onMouseOut="this.src='images/menu/b-clanwars.png'">
    75.                     </a></div>
    76.                    
    77.                    
    78.                     <!-- Navigation Server -->
    79.                     <div id="b-server"
    80.                    <a href="#">
    81.                         <img src="images/menu/b-server.png" onMouseOver="this.src='images/menu/b-server-h.png'" onMouseOut="this.src='images/menu/b-server.png'">
    82.                     </a></div>
    83.                     <div id="b-ts"
    84.                    <a href="#">
    85.                         <img src="images/menu/b-ts.png" onMouseOver="this.src='images/menu/b-ts-h.png'" onMouseOut="this.src='images/menu/b-ts.png'">
    86.                     </a></div>
    87.                     <div id="b-csgo"
    88.                    <a href="#">
    89.                         <img src="images/menu/b-csgo.png" onMouseOver="this.src='images/menu/b-csgo-h.png'" onMouseOut="this.src='images/menu/b-csgo.png'">
    90.                     </a></div>
    91.                    
    92.                    
    93.                 </div>
    Würde mich sehr über eine antwort freuen :)

    LG Rocco ;)
     
  2. Kalito

    Kalito Erfahrenes Mitglied

    Soll es nur eine einfache Info-Seite sein? Warum verwendest du nicht hierfür ein einfaches CMS, welches solche Sachen vo Haus aus mitbringt.
    Ohne jetzt den weiteren Code zu kennen, musst du dem jeweilligen Menüpunkt mitgeben (über eine Klasse), ob dieser Aktiv ist. Mittels Javascript könntest du die URL auslesen und darauf hin einem Link die Klasse "Aktiv" zuordnen. Diese musst du dann nur noch mit CSS stylen.
     
  3. EuroCent

    EuroCent KlappStuhl 2.0

    Lös es doch via jQuery. :)
    Überprüf ob der Link aktiv ist :D
     
  4. Wahooka

    Wahooka Grünschnabel

  5. Jan-Frederik Stieler

    Jan-Frederik Stieler Monsterator Moderator

    Hi,
    für solche Aufgaben wurde eigentlich mal PHP entwickelt.
    Grüße
     
Die Seite wird geladen...