活動時設置背景顏色

Question

我正在製作一個投資組合網站。在菜單中，我有以下幾種：

主頁，服務，投資組合（下拉），關於我，聯繫。

下以下文件夾結構的項目，我有：

網站根目錄 - >項目 - > projectName.html

當一個菜單項有效時，它具有一個藍色的背景。現在，它只是html，所以我分配了正確的標題，每當我創建一個新的頁面時，必須在fx Portfolio下。總結起來。我有5個不同的標題，其中每個標題都附有特定的選定菜單藍色背景。

我想使用1頭，其功能是：如果我點擊「關於我」，「活動類」被稱爲，這意味着藍色背景是活動的。如果我在投資組合下單擊projectName.html，則投資組合菜單處於活動狀態，並具有藍色背景。

我知道如何完成這項工作的唯一方法是是否存在用戶登錄和會話。我能用這樣的CSS做些什麼嗎？

<!-- begin nav --> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-12"> 

        <div class="navbar-header"> 
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
          <span class="sr-only">Toggle navigation</span> 
          <span>Tap me!</span> 
         </button> 
         <!-- begin logo in navigation --> 
         <a class="navbar-brand" href="index.php"> 
           <img src="images/webdesign_Logo.png"> 
         </a> 
         <!-- end logo in navigation --> 
        </div> 

        <div class="navbar-collapse collapse"> 
         <ul class="nav nav-pills nav-main pull-right"> 
          <!-- begin navigation items --> 
          <li class="active"><a href="index.php">Home</a></li> 
          <li> 
           <a href="services_smallicon.php">Services</a> 
          </li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio</a> 
           <ul class="dropdown-menu"> 
            <li> 
             <a href="portfolio_2col.php">Portfolio 2 Column</a> 
            </li> 
            <li> 
             <a href="portfolio_3col.php">Portfolio 3 Column</a> 
            </li> 
            <li> 
             <a href="portfolio_4col.php">Portfolio 4 Column</a> 
            </li> 
            <li> 
             <a href="portfolio_single.php">Portfolio Single Item</a> 
            </li> 
            <li> 
             <a href="portfolio_single_fullwidth.php">Portfolio Single Full Width</a> 
            </li> 
            <li> 
             <a href="portfolio_single_options.php">Portfolio Single Options</a> 
            </li> 
            <li> 
             <a href="blogoverview_grid.php">Blog</a> 
            </li> 
           </ul> 
          </li> 
          <li> 
           <a href="aboutme.php">About Me</a> 
          </li> 
          <li><a href="contact.php">Contact</a></li> 
          <!-- end navigation items --> 
         </ul> 
        </div> 

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

Answer 1

您可以使用CSS來執行藍色背景的那個效果的活性時：

yourDivId li:active{ 
background-color: blue; 
} 

yourDivId li:hover{ 
background-color: lightblue; 
} 

使用CSS，你可以用JS更改類爲「有效」點擊每個L1時。

你可以明白我的意思是：

http://www.w3schools.com/cssref/sel_active.asp

閱讀：

提示：的：積極選擇可以在所有元素，不僅鏈接中。

提示：使用：鏈接選擇樣式鏈接到未訪問過的頁面，：訪問選擇樣式鏈接訪問的網頁，以及：選擇懸停鏈接樣式，當您將鼠標放在他們。

注：：積極必須出現之後：爲了有效懸停（如果存在的話）的CSS定義！

關於JavaScript的部分，你可以使用這個答案在這個論壇：

$('li a').click(function(e) { 
    e.preventDefault(); 
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
}); 

來源：Add & remove active class from a navigation link

Answer 2

第一，我建議創建單獨的PHP文件的資產淨值，包括它在其他文件和。

第二，這樣使用JavaScript代碼：當包括你的資產淨值文件中設置$ SelectedMenu變量

<script> 
document.getElementById("**yourMenuItems**").children.item(<?php echo $SelectedMenu; ?>).classList.add("active"); 
</script> 

thired。

Answer 3

我建議使用PHP和這個類來獲得一個基本的模板系統，它還包括一個函數來添加「活動」類菜單。

<?php 
/** 
    HOW TO USE THIS CLASS. 

    In every page: 
----------------------------------------------------------------------------------------------- 
    <?php 
     require 'Page.php' 

     $page = new Page('Home', 1); <-- initialize the page object 
     $page->addJS('path/tojs.js'); <-- add javascripts if needed 
     $page->addCSS('path/tocss.css') <-- add css if needed 
     $page->startBody(); <--- start the page body 

    ?> 

    --HTML HERE-- 

    <?php 
    $page->endBody(); <--- close the body 
    echo $page->render('inc/template.php'); <-- render the template 

------------------------------------------------------------------------------------------------ 
**/ 

class Page { 
    private $title, $id = 0, $stylesheets=array(), $javascripts=array(), $body; 

    function __construct($title, $id = 0) { 
     $this->title = $title; 
     $this->id = (int)$id; 
    } 

    function setTitle($title) { 
     $this->title = $title; 
    } 

    function setId($id){ 
     $this->id = (int)$id; 
    } 

    function addCSS($path) { 
     $this->stylesheets[] = $path; 
    } 

    function addJS($path) { 
     $this->javascripts[] = $path; 
    } 

    function startBody() { 
     ob_start(); 
    } 

    function endBody() { 
     $this->body = ob_get_clean(); 
    } 

    function render($path) { 
     ob_start(); 
     require($path); 
     return ob_get_clean(); 
    } 

    function activeMenu($id){ 
     echo $this->id == $id ? 'active' : '' ; 
    } 

    function minifyCSS(){ 
     $buffer = ""; 

     foreach ($this->stylesheets as $css) { 
      $buffer .= file_get_contents($css); 
     } 

     $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); 
     $buffer = str_replace(': ', ':', $buffer); 
     $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); 

     return $buffer; 
    } 
} 

然後在模板：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title><?php echo $this->title; ?></title> 

     <?php 
      foreach ($this->stylesheets as $stylesheet) { 
       echo '<link href="' . $stylesheet . '" rel="stylesheet" type="text/css" />' . PHP_EOL; 
      } 

      //or echo '<style>'.$this->minifyCSS().'</style>'; to get minimized css 
     ?> 
    </head> 
    <body> 

     <nav> 
      <a href="home.php" class="<?php $this->activeMenu(1) ?>">Home</a> 
      <a href="other.php" class="<?php $this->activeMenu(5) ?>">Other Page</a> 
     </nav> 

     <?php echo $this->body; ?> 

     <?php 
      foreach ($this->javascripts as $javascript) { 
       echo '<script src="' . $javascript . '"></script>' . PHP_EOL; 
      } 
     ?> 
    </body> 
</html>