Farbe aktive navbar, wenn ausgewählt

In meiner Navigationsleiste, die ich baue, funktioniert der Hover gut. Aber wenn ich auf eine Schaltfläche klicke, bleibt die blaue Farbe der Schrift auf "hjem" stehen. Im Moment nennt "hjem" eine Klasse namens "active". Ich bin nicht ganz sicher, ob ich das mit CSS lösen kann, oder muss ich dafür JavaScript machen?Farbe aktive navbar, wenn ausgewählt

Im Moment mein HTML-Header sieht wie folgt aus:

<!-- header-container start --> 
      <div class="header-container"> 
       <header class="header fixed clearfix"> 

        <div class="container"> 
         <div class="row"> 
          <div class="col-md-3 "> 
           <!-- header-left start --> 
           <!-- ================ --> 
           <div class="header-left clearfix"> 

            <!-- header dropdown buttons --> 
            <div class="header-dropdown-buttons visible-xs"> 
             <div class="btn-group dropdown"> 
              <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button> 
              <ul class="dropdown-menu dropdown-menu-right dropdown-animation"> 
               <li> 
                <form role="search" class="search-box margin-clear"> 
                 <div class="form-group has-feedback"> 
                  <input type="text" class="form-control" placeholder="Search"> 
                  <i class="icon-search form-control-feedback"></i> 
                 </div> 
                </form> 
               </li> 
              </ul> 
             </div> 
            </div> 
            <!-- header dropdown buttons end--> 

            <!-- logo --> 
            <div id="logo" class="logo"> 
             <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php"><img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" alt=""></a> 
            </div> 

           </div> 
           <!-- header-left end --> 

          </div> 
          <div class="col-md-9"> 
           <div class="main-navigation animated with-dropdown-buttons"> 

            <!-- navbar start --> 
            <!-- ================ --> 
            <nav class="navbar navbar-default" role="navigation"> 
             <div class="container-fluid"> 

              <!-- Toggle get grouped for better mobile display --> 
              <div class="navbar-header"> 
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
                <span class="sr-only">Toggle navigation</span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
                <span class="icon-bar"></span> 
               </button> 

              </div> 

              <!-- Collect the nav links, forms, and other content for toggling --> 
              <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
               <!-- main-menu --> 
               <ul class="nav navbar-nav "> 

                <!-- mega-menu start --> 
                <li class="active mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php">Hjem</a> 
                </li> 
                <!-- mega-menu end --> 

                <!-- mega-menu start --> 

                <li class="dropdown mega-menu"> 
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a> 
                 <ul class="dropdown-menu"> 
                  <li> 
                   <div class="row"> 
                    <div class="col-lg-8 col-md-9"> 

                     <div class="row"> 
                      <div class="col-sm-4"> 
                       <h4 class="title">Design</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/ux-ui.php"><i class="fa fa-angle-right"></i>UX/UI</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/prototyping.php"><i class="fa fa-angle-right"></i>Prototyping</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/web-design.php"><i class="fa fa-angle-right"></i>Web Design</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/grafisk-design.php"><i class="fa fa-angle-right"></i>Grafisk Design</a></li> 
                       </ul> 
                      </div> 
                      <div class="col-sm-4"> 
                       <h4 class="title">Webudvikling</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/webudvikling.php"><i class="fa fa-angle-right"></i>Webudvikling</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/php-mysql.php"><i class="fa fa-angle-right"></i>PHP & MySQL databaser</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/wordpress.php"><i class="fa fa-angle-right"></i>Wordpress</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/umbraco.php"><i class="fa fa-angle-right"></i>Umbraco</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/joomla.php"><i class="fa fa-angle-right"></i>Joomla</a></li> 
                       </ul> 
                      </div> 
                      <div class="col-sm-4"> 
                       <h4 class="title">Marketing Automation</h4> 
                       <div class="divider"></div> 
                       <ul class="menu"> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/mautic.php"><i class="fa fa-angle-right"></i>Mautic</a></li> 
                        <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/landeside.php"><i class="fa fa-angle-right"></i>Landesider</a></li> 
                       </ul> 
                      </div> 
                     </div> 
                    </div> 
                    <div class="col-lg-4 col-md-3 hidden-sm"> 
                     <h4 class="title">Oversigt over kompetencer</h4> 
                     <p class="mb-10"><a href=" http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/alle-kompetencer.php"><u>En oversigt over alle mine kompetencer</u></a></p> 
                     <img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project"> 
                    </div> 
                   </div> 
                  </li> 
                 </ul> 
                </li> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/portfolio.php">Portfolio</a> 
                </li> 

                <!-- mega-menu end --> 
                <li class="dropdown "> 
                 <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a> 
                 <ul class="dropdown-menu"> 
                  <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/uddannelse.php">Uddannelse</a></li> 
                  <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/erhvervserfaring.php">Erhvervserfaring</a></li> 
                  <li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/personlighed.php">Personlighed</a></li> 
                 </ul> 
                </li> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/artikler-index.php">Artikler</a> 
                </li> 

                <!-- mega-menu start --> 
                <!-- mega-menu start --> 
                <li class="mega-menu"> 
                 <a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kontakt.php">Kontakt</a> 
                </li> 


               </ul> 
               <!-- main-menu end --> 

               <!-- header dropdown buttons --> 
               <div class="header-dropdown-buttons hidden-xs "> 
                <div class="btn-group dropdown"> 
                 <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button> 
                 <ul class="dropdown-menu dropdown-menu-right dropdown-animation"> 
                  <li> 
                   <form role="search" class="search-box margin-clear"> 
                    <div class="form-group has-feedback"> 
                     <input type="text" class="form-control" placeholder="Search"> 
                     <i class="icon-search form-control-feedback"></i> 
                    </div> 
                   </form> 
                  </li> 
                 </ul> 
                </div> 
               </div> 
               <!-- header dropdown buttons end--> 

              </div> 

             </div> 
            </nav> 
            <!-- navbar end --> 

           </div> 
           <!-- main-navigation end --> 
           </div> 
           <!-- header-right end --> 

          </div> 
         </div> 
        </div> 

       </header> 
       <!-- header end -->

Quelle

2016-11-20 Ne Kr

gut, müssen Sie nur Ihre aktive Klasse mit Ihrer Seite ändern.

function set_active($path){ 
    $a= explode('/', $_SERVER['SCRIPT_NAME']); 
    $page = array_pop($a); 

    if ($page == $path.'.php'){ 
     return "active"; 
    } else { 
     return ""; 
    } 
} 


<li class="<?= set_active('profile'); ?>">

Nun, ich bin versucht, zu helfen, ich bin nicht wirklich gut, aber wenn ich will mein Menü aktiv ich tun, um diese Funktion setzen. Viel Glück: D

Quelle

2016-11-20 11:32:20

Ah okay Die Party war nicht so schwer, wie ich überhaupt gedacht.

HTML

<body id="portfolio"> 
<a href="portfolio.php">Portfolio</a>

navbar.js

$(function() { 
    $("#portfolio a:contains('Portfolio')").parent().addClass('active'); 
});

Quelle

2016-11-20 11:30:30

Farbe aktive navbar, wenn ausgewählt

Antwort

Verwandte Themen