基于活动页面突出显示活动元素答案

【问题标题】：highlight active element based on active page基于活动页面突出显示活动元素
【发布时间】：2015-08-10 23:28:42
【问题描述】：

我搜索了类似的问题，但没有一个有效，所以我在这里请求您的帮助。 我想要的是：

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

注意1：这个菜单在主体中是用require_once("path/to/navmenu.php")调用的，不知道有没有影响

注意 2： 我知道 jQuery 是这里的关键，但我在 stackoverflow 中尝试了一些类似问题的代码，但没有一个有效。感谢 JSfiddle

HTML 代码：

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

【问题讨论】：

这方面的一些变化可能会有所帮助？ -stackoverflow.com/questions/9755751/…
即使这对 CSS 也有帮助 css-tricks.com/attribute-selectors

标签： jquery html css

【解决方案1】：

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

但是，如果您不重定向，请告诉我，我将添加相同的代码。

// 服务器端代码

<?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.：我保持这个非常简单是为了让您了解我们正在努力实现的核心概念。这可以通过多种方式进行改进，但对于初创公司来说，这可以很好地帮助他们从哪里开始。

【讨论】：

并不是他们“需要”做服务器端代码。这不是他问题的答案。不完全。
@TheWarlock，实际上他想重定向页面，所以唯一的方法是做服务器端代码将类应用到适当的链接。这就是发布这种方法的原因。
在所有页面中都有一个通用的js代码，可以根据URL和一些准备好的数据来评估它吗？
您好，我明白您的意思。对我来说最简单的任务是在 head 部分中设置一个可以在所有页面中运行的 JS。那会是一个解决方案吗？如果需要不同的代码，我也可以在每个页面中有不同的头部部分。
是的，这可以做到，但如果您遇到这种情况，您个人会更喜欢这个解决方案吗？所以我的尝试是给他一个最佳的解决方案，而不仅仅是解决方案。

【解决方案2】：

您使用的是 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;
}

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

【讨论】：

啊，我明白了。会尝试并返回结果

【解决方案3】：

当您重定向用户时。您需要检查页面名称并在页面准备好后突出显示具有与href 相同值的锚链接的li 元素。关注 sn-p 可能会有所帮助。

$(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");
        }
    });
});

这里是完整的 sn-p。将其保存为名为 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）

【讨论】：

感谢sn-p！将其添加到我的 sn-p 列表中:)

【解决方案4】：

我会很感激用 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() 函数中调用它。

【讨论】：

这不起作用，因为锚链接没有任何名为src的属性

【解决方案5】：

你好。我浏览了你所有的 cmets 和答案。说实话，你提到的每件事都是在耍花招。但由于我对 JS/Jquery 和 CSS3 选择器有点不熟悉，所以我选择了 php 方式:)

所以它做了什么：在每个页面上添加一个变量，例如 $about_page=1;例如。当有人访问索引页时。然后在 navigation.php 上我做了一些 if 语句来呼应“活动”类。 (

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

【讨论】：