php - Jquery 没有为我的导航菜单添加或删除我选择的类

Question

我用 php 写了我的网站。我有索引文件从页面文件夹动态加载我的页面。我也将导航菜单放在一个单独的文件中。

所以我试图在单击时突出显示文本颜色，因为我无法使窗口定位工作。由于我设置它的方式，窗口位置使用 javascript 或 jquery 返回/index.php。所以我试图通过只定位链接来保持简单。

    <nav>
    <ul>
    <li><a href="index.php?p=home" class="selected">Home</a></li>
    <li><a href="index.php?p=skills">Skills</a></li>
    <li><a href="index.php?p=about">About</a></li>
    <li><a href="index.php?p=contact">Contact</a></li>
    </ul>
    </nav>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--Script to add selected class to highlight active link-->    
<script>
    $(document).ready(function(){
        $("ul li a").click(function(){
        $("ul li a").removeClass('selected');  
        $("ul li a").addClass('selected');
        });
    });
</script>

我的 css 是这样设置的:

a.selected{color:#0066ff;}

我已经尝试将此代码放入我创建的每个 php 文件中。仍然没有任何效果。当我希望在单击链接时弹出一个带有消息的警告框时，效果很好。为什么这不起作用？当我运行代码时没有任何变化...有什么建议吗？

Answer 1

如果您通过单击每个链接重新加载页面，然后尝试

<nav>
<ul>
<li><a href="index.php?p=home" <?php (empty($_GET['p']) || $_GET['p'] == 'home') ? echo 'class="selected"' : ''?> >Home</a></li>
<li><a href="index.php?p=skills" <?php $_GET['p'] == 'skills' ? echo 'class="selected"' : ''?>>Skills</a></li>
<li><a href="index.php?p=about" <?php $_GET['p'] == 'about' ? echo 'class="selected"' : ''?>>About</a></li>
<li><a href="index.php?p=contact" <?php $_GET['p'] == 'contact' ? echo 'class="selected"' : ''?> >Contact</a></li>
</ul>
</nav>

尽管您不需要 jQuery 函数。
如果你不想重新加载页面，那么在你的 jQuery 中试试这个:

$(document).ready(function(){
    $("ul li a").click(function(){
       $("ul li a").removeClass('selected');  
       $(this).addClass('selected');
       return false;
    });
});