Question

我搜索了类似的问题，但都没有用，所以我在这里请求你的帮助。 我想要的是：

当有人访问“关于”时，li将变为活动状态，以便css适用。当他按下“服务”时，会发生与上述相同的情况等。

注1：这个菜单在主体中用require_once（“path / to / navmenu.php”）调用，我不知道它是否会影响任何东西

注意2：我知道jQuery是关键，但我在类似问题的stackoverflow中尝试了一些代码而没有工作。赞赏JSfiddle

HTML CODE：

<nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a><div  class="menu-space"></div></li>
    <li><a href="about-us-style1.php">about</a><div class="menu-space"></div></li>
    <li><a href="service-style2.php">service</a><div class="menu-space"></div></li>
</nav>

CSS代码：

 .flexy-menu li:hover > a,
 .flexy-menu li.active a {
   background: #c68f50;
   color: #fff;
 }

Answer 1

您正在使用PHP，因此您只需在每个页面的头部定义一个PHP变量，例如：对于关于页面：

$about_page = 1;

如果用户在该特定页面上，您可以突出显示您的菜单点：

<li><a href="about-us-style1.php" class="<?php if($about_page == 1) { echo 'highlighted'; } ?>">about</a><div class="menu-space"></div></li>

并且不要忘记在CSS中声明课程highlighted：

.highlighted {
   background: #c68f50;
   color: #fff;
}

只是一个想法 - 可能有更高级的解决方案

Answer 2

好吧，我很感激在PHP中这样做，因为你有一个单独的NavBar文件，这是一个很好的做法。使用JQuery可以实现如下：

function setMenu()
{
   var chk = false;
   $(".flexy-menu li").removeClass('active').each(function()
   {
       if(chk == false && window.location.href.indexOf($(this).find('a').attr('href')) != -1)
       {
           $(this).addClass('active');chk = true;
       }
   });       
}

您可以在显示菜单后随时拨打setMenu();。最好在$(document).ready()函数中调用它。

Answer 3

好吧，如果您要将用户重定向到另一个页面，那么您需要执行服务器端代码来检查当前页面并应用适当的类来链接。

但是如果你不重定向那么请告诉我，我会添加相同的代码。

//服务器端代码

<?php
    $page_name = str_replace('.php', '', $_SERVER['PHP_SELF']);

    $page_array = array(
            'index'=>'',
            'about'=>''
    );
    $page_array[$page_name] = 'active';
?><html>
    <head>
        <title>Active Menu</title>
    </head>
    <body>
        <nav>
            <a href="#" class="<?php echo $page_array['index']?>">Home</a>
            <a href="#" class="<?php echo $page_array['about']?>">About</a>
        </nav>
    </body>
</html>

p.s。：我一直保持这一点非常简单，让您了解我们正在努力实现的核心概念。这可以通过多种方式得到改善，但对于初创公司来说，这可以很好地帮助从哪里开始。

Answer 4

当您重定向用户时。您需要检查页面名称，并在页面准备好后突出显示具有与li相同值的锚链接的href元素。以下代码段可能有所帮助。

$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});

这是完整的代码段。将其另存为名为test2.html

的html文件

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  <script type='text/javascript' src='https://code.jquery.com/jquery-1.9.1.js'></script>
  <style type='text/css'>
    .flexy-menu li:hover > a, .flexy-menu li.active a {
         background: #c68f50;
         color: #fff;
    }
  </style>



<script type='text/javascript'>
$(document).ready(function () {
    var pagename = location.pathname.split('/').slice(-1)[0];
    $(".flexy-menu li a").each(function (index) {
        if($(this).attr("href").indexOf(pagename)==0){
            $(this).parent().addClass("active");
        }
        else{
            $(this).parent().removeClass("active");
        }
    });
});
</script>


</head>
<body>
  <nav class="flexy-menu">
    <li class="active"><a href="index.php">home</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="test2.html">about</a>

        <div class="menu-space"></div>
    </li>
    <li><a href="service-style2.php">service</a>

        <div class="menu-space"></div>
    </li>
</nav>
</body>
</html>

请注意，在html中li有一个活跃的active类。但是在浏览器中如果第二个链接将突出显示（如果您将文件保存为test2.html）

Answer 5

再次问好。我会仔细阅读你的所有评论和答案。你提到的一切都是为了说实话。但是因为我有点不熟悉JS / Jquery和CSS3选择器，所以我采用了php的方式：）

所以它做了什么：在每个页面上添加一个变量，如$ about_page = 1;例如。当有人访问indexpage时。然后在navigation.php上我做了一些if语句回应＆＃34;活跃＆＃34;类。（

<li <?php if($about_page==1){echo 'class="active"';}?>><a href="about-us-style1.php">about</a><div class="menu-space"></div>
            </li>

根据活动页面

5 个答案: