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

您的代码中有一些更改

enter image description here

修改了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>

突出显示当前的菜单问题

2 个答案: