Цвет активной навигационной панели при выборе

В моей панели навигации, которую я создаю, зависание работает нормально. Но когда я нажимаю кнопку, синий цвет на шрифте остается на «hjem». На данный момент «hjem» вызывает класс, называемый «активным». Я не совсем уверен, могу ли я решить это с помощью CSS, или мне нужно сделать для этого JavaScript?Цвет активной навигационной панели при выборе

На данный момент мой заголовок HTML выглядит следующим образом:

<!-- 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 -->

источник

2016-11-20 Ne Kr

хорошо, вы просто должны изменить свой активный класс с вашей страницы.

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'); ?>">

Ну я пытаюсь помочь, я не очень хорошо, но когда я хочу поставить мое меню активного я эту функцию. Удачи: D

источник

2016-11-20 11:32:20

Ах хорошо это было не так сложно, как я думал, что на всех.

HTML

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

navbar.js

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

источник

2016-11-20 11:30:30

Цвет активной навигационной панели при выборе

ответ

Смежные вопросы