php - 激活时设置背景颜色

Question

我正在制作一个投资组合网站。在菜单中我有以下元素:

Home, Services, Portfolio(dropdown), About me, Contact.

在元素下，我必须遵循以下文件夹结构:

Website root -> Portfolio -> projectName.html

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

我想使用 1 个标题，其功能是:如果我单击“关于我”，将调用“事件类”，这意味着蓝色背景处于事件状态。如果我单击 Portfolio 下的 projectName.html，则 Portfolio 菜单处于事件状态，背景为蓝色。

我知道如何实现该功能的唯一方法是是否存在用户登录和 session 。我可以像这样用 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