使用 jquery 加载的菜单不会被激活

Question

我正在构建一些带有菜单的 html，并且我在我的页面上使用 jquery 将其包含在内。当用户点击某个链接时，a 元素会得到一些类：ativado。

我的问题是，我如何加载用户点击菜单链接“激活”的页面？

我清楚了吗？

我的菜单：

<ul class="sf-menu">
    <li>
        <a href="#">O Clube</a>
        <ul>
            <li class="first"><a href="sobre.html">- Sobre</a></li>
            <li><a href="basquete_em_franca.html">- Basquete em Franca</a></li>
            <li><a href="ginasio.html">- Ginásio</a></li>
            <li><a href="titulos.html">- Títulos</a></li>
            <li><a href="times.html">- Times</a></li>
            <li><a href="social.html">- Social</a></li>
            <li><a href="estatisticas.html">- Estatísticas</a></li>
            <li><a href="cronograma_historico.html">- Cronograma Histórico</a></li>
            <li><a href="pedroca.html">- Pedroca</a></li>
            <li class="last"><a href="hino.html">- Hino</a></li>
        </ul>
    </li>
    <li><a href="equipe.html">A Equipe</a></li>
    <li><a href="calendario.html">Calendário</a></li>
    <li><a href="campeonatos.html">Campeonatos</a></li>
    <li><a href="socio_torcedor.html">Sócio Torcedor</a></li>
    <li><a href="noticias.html">Notícias</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="loja.html">Loja</a></li>
    <li><a href="parceiros.html">Parceiros</a></li>
    <li><a href="links.html">Links</a></li>
    <li class="last"><a href="fale_conosco.html">Fale Conosco</a></li>
</ul>

我的脚本：

<script type="text/javascript">
    $(document).ready(function() {
        $('.sf-menu a').click(function(e) {
            e.preventDefault();
            $('.sf-menu a').removeClass('ativado');
            $(this).addClass('ativado');
            var novaURL = $(this).attr('href');
            $(window.document.location).attr('href',novaURL);
        });

    });
</script>

css:

.sf-menu a.ativado{
    color:#FFF;
    background:#CC0000;
} 

Answer 1

您可以使用此脚本获取当前页面名称：

var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);

发件人：http://fuchangmiao.blogspot.com/2009/04/get-current-page-name-in-javascript.html

然后您可以找到应该激活的锚标记：

<script type="text/javascript">
    $(document).ready(function() {
        $('.sf-menu a').click(function(e) {
            e.preventDefault();
            $('.sf-menu a').removeClass('ativado');
            $(this).addClass('ativado');
            var novaURL = $(this).attr('href');
            $(window.document.location).attr('href',novaURL);
        });

        $(".sf-menu a[href='" + sPage + "']").addClass("ativado");
    });
</script>

Answer 2

您需要实施一些新技术来实现您想要做的事情。 JavaScript 是一种客户端语言，因此如果您通过单击 DOM 元素来更改类，那么同样的单击会将您带到另一个页面，您将丢失由 JS 设置的类！

这里只是您可以使用的几个选项。如果您希望我详细说明其中任何一个，请发表评论。

选项 1：服务器端脚本

第一个选项是使用服务器端语言（如 PHP）处理这些动态类。例如，use a solution like this 获取当前页面的 URL。然后，编写一些逻辑，例如：

<a href="lala.php" class="<?php if($page=='lala') { echo 'active'; } ?>">

如果您在该页面上，它将附加课程。这主要是我为快速拼凑的网站所做的。

选项 2：AJAX

您还可以进行 ajax 调用以从服务器中提取数据并更新页面上的内容。这很糟糕，因为它不会更新 URL 或用户的浏览器历史记录；看起来他们正在页面本身上浏览您的页面。

选项 3：AJAX + HTML5 浏览器 API

此选项是所有选项中最复杂的，但它仅适用于现代浏览器。您要做的是进行 AJAX 调用，然后使用 HTML5 history API 修改用户的历史记录。这样做的目的是使新内容出现，同时更改浏览器窗口中的 URL 并将新页面添加到用户的历史记录中——所有这些都无需重新加载。太棒了。

选项 4：可链接标签

我认为这个解决方案很糟糕，但它会做你想做的事。有很多可能性；我不会试图在这里列出它们来重新发明轮子。您可以查看其中一些，看看是否适合您。

One Two Three

选项 5：硬编码页面

另一种选择——也许是最糟糕的选择——将菜单代码放在您的每个网页上。然后在每个页面上，您可以将类附加到正确的链接。我不会这样做，因为如果您的网站不止几个页面，维护起来就太乏味了。

Answer 3

检查你的代码行：

e.preventDefault();
$('.sf-menu a').removeClass('ativado');
$(this).addClass('ativado');

我在这里测试了评论这些行并且它有效。
可能这个 e.preventDefault() 触发了一个错误，其余代码不能正常工作。