彩色活動導航欄被選中

在我正在建立的導航欄中，懸停工作正常。但是，當我點擊一個按鈕時，字體上的藍色仍然保持「最佳狀態」。目前「高級」稱爲「活躍」類。我不太確定我是否可以用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

彩色活動導航欄被選中

回答

相關問題