突出当前菜单问题

Question

我不明白为什么我不能在导航栏上突出显示当前菜单页面（除了我是一个完全初学者的事实 :-) 我正在使用 JQuery 函数，这是我在网上找到的众多函数之一，但它们都不起作用。 功能是：

<script type="text/javascript">
    $(function(){
        var path=window.location.pathname;
        path=path.replace(/\/$/, "");
        path = decodeURIComponent(path);

        $('#menu a').each(function() {
            var href=$(this).attr('href');
            if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }

        });

        });
    </script>

我的 CSS 是：

@charset "UTF-8";
/* CSS Document */

#menu{ width:100%; height:40px; background-color: pink; border-bottom: 1px silver solid;}

#menu ul {

    list-style: none;
    margin:0 auto; 
    position: relative;
    padding:5px 0;
    width: 940px;
}

#menu ul li {
    display:inline;
    margin-left: 150px;

          }

#menu li:first-child {
  margin-left:0;
    }         

#menu ul li a {
  color: silver;
  display:block-inline;
  font: 16px "Comic Sans MS", cursive;
  text-align: center;
  text-decoration: none;  
        }


#menu ul li a:hover {
  background-color: yellow;
  text-decoration:underline;
}
.active{
    color:green;
    }

HTML 标记是：

<?php
echo<<<END

    <div id="menu">
                    <ul>
                    <li><a id="home" style="color:white; font-size:16px;" href="$doc_root/index.php" title="Home Page">Enzo</a></li>
                    <li><a id="travel" href="$doc_root/travel/grid.php" title="My Trips"><span>travelling</span></a></li>
                    <li><a id="images" href="#">images</a></li>
                    <li><a id="words" href="#">words</a></li>
                    <li><a id="about" href="#">about</a></li>
                    </ul>
            </div>  
END;
?>

我不知道出了什么问题，可能是我的 css。 为简单起见只是颜色：绿色，我不确定“活动”类是否正确插入 CSS 菜单页面。 请给我一些提示或其他解决方案来解决问题。 爱你们所有人 :-)

Answer 1

只需检查我认为是 PHP 变量的 $doc_root 格式是否为

<?=$doc_root?>

或者，如果您没有打开短打开 PHP 标记，请尝试

<?php echo $doc_root; ?>

改为。

这是为了确保它正确地写在 html 中。如果您在浏览器中查看工作的源代码，并且可以看到 $doc_root 而不是变量 $doc_root 的值，那么这可能就是问题所在。

Answer 2

您的代码有几处更改

Javascript 修改

 $(function () {
            var path = window.location.pathname;
            path = path.replace(/\/$/, "");
            path = decodeURIComponent(path);

            $('#menu a').each(function () {
                var href = $(this).attr('href');
                if (href.indexOf(path) != -1) {
                    $(this).closest('li').find('a').addClass('active');
                }

            });

        });

修改后的 CSS

#menu ul li a {    
  display:block-inline;
  font: 16px "Comic Sans MS", cursive;
  text-align: center;
  text-decoration: none;  
        }

HTML 修改

<div id="menu">
            <ul>
                <li><a id="home" href="http://localhost:50160/SelectedMenu.aspx" title="Home Page">Enzo</a></li>
                <li><a id="travel" href="#" title="My Trips"><span>travelling</span></a></li>
                <li><a id="images" href="#">images</a></li>
                <li><a id="words" href="#">words</a></li>
                <li><a id="about" href="#">about</a></li>
            </ul>
        </div>