激活时设置背景颜色

Question

我正在制作一个投资组合网站。在菜单中，我有以下项目：

首页、服务、投资组合（下拉）、关于我、联系人。

在项目下我必须遵循文件夹结构：

网站根目录 -> 作品集 -> projectName.html

当菜单项处于活动状态时，它具有蓝色背景。就像现在一样，它只是 html，所以我已经分配了正确的标题，每次我创建一个新页面时都必须在 fx Portfolio 下。总结一下。我有 5 个不同的标题，每个标题都附有特定的选择菜单蓝色背景。

我想在功能所在的地方使用 1 个标题：如果我单击“关于我”，则会调用“活动类”，这意味着蓝色背景是活动的。如果我单击 Portfolio 下的 projectName.html，则 Portfolio 菜单处于活动状态，背景为蓝色。

我知道如何完成这项工作的唯一方法是是否存在用户登录和会话。我可以用这样的 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，您可以在单击每个 li 时使用 JS 将类更改为“活动”。

你可以在这里看到我的意思：

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

阅读：

提示： :active 选择器可用于所有元素，而不仅仅是链接。

提示： 使用 :link 选择器设置未访问页面的链接样式，使用 :visited 选择器设置已访问页面的链接样式，以及:hover 选择器可在您将鼠标悬停在链接上时为其设置样式。

注意： :active 必须在 CSS 定义中的 :hover（如果存在）之后才能生效！

关于 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代码：

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

hired，当包含您的导航文件时设置 $SelectedMenu 变量。

Answer 3

我建议使用 PHP 和这个 Class 来获得一个基本的模板系统，它还包括一个将“活动”类添加到菜单的功能。

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