使用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);

来自：

然后，您可以找到应该被激活的锚标签：

<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浏览器应用编程接口

这个选项是所有选项中最复杂的，但它只适用于现代浏览器。您要做的就是发出一个AJAX调用，然后使用HTML5 history API修改用户的历史记录。这样做的目的是让新内容出现，同时更改浏览器窗口中的URL并将新页面添加到用户的历史记录中--所有这些都不需要重新加载。令人惊叹。

选项4:可链接的选项卡

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

One Two Three

选项5:硬编码页面

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

Answer 3

检查您的代码中的这些行：

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

我在这里进行了测试，并对这些行进行了注释，它成功了。

可能这个e.preventDefault()触发了一个错误，其余的代码不能正常工作。