Question

我正在制作投资组合网站。在菜单中，我有以下内容：

主页，服务，投资组合（下拉列表），关于我，联系。

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

网站根目录 - ＆gt;投资组合 - ＆gt; projectName.html

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

我想使用1个标题，其功能是：如果我点击＆＃34;关于我＆＃34; ＆＃34;活跃课程＆＃34;被调用，这意味着蓝色背景是活动的。如果我单击“投资组合”下的“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将类更改为＆＃34; active＆＃34;当点击每个li时。

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

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

阅读本文：

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

提示：使用：链接选择器设置指向未访问网页的链接的样式，：已访问选择器设置指向已访问网页的链接的样式，以及：悬停选择器可在鼠标悬停在其上时设置链接样式。

注意： ：有效必须在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>

thired ，当包含导航文件集$ SelectedMenu变量时。

Answer 3

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

   let secondViewController:WebV = WebV()
   self.presentViewController(secondViewController, animated: true, completion: nil)

然后在模板中：

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

活动时设置背景颜色

3 个答案: