活动时设置背景颜色

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>