使用jquery don'加载菜单；我不能被激活

我正在用菜单构建一些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>

---

检查代码的以下行：

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

我在这里测试了注释这些行，它起了作用

---

可能这个e.preventDefault（）触发了一个错误，而代码的其余部分工作不正常。

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

以下是一些您可以使用的选项。如果你想让我详细说明其中的任何一个，请留下评论

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

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

修改用户的历史记录。这将使新内容出现，同时更改浏览器窗口中的URL，并将新页面添加到用户的历史记录中——所有这些都不需要重新加载。太神奇了

选项4：可链接选项卡
我认为这个解决方案很糟糕，但它可以满足你的需要。有太多的可能性；我不会试图在这里列出它们来重新发明轮子。你可以查看其中的一些，看看是否有适合你的



选项5：硬编码页面
另一种选择——可能是最糟糕的选择——是在每个网页上都添加菜单代码。然后在每个页面上，您可以将类附加到适当的链接。我不会这样做，因为如果您的网站超过几个页面，那么维护起来就太繁琐了。
您可以使用此脚本获取当前页面名称：

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>


$（文档）.ready（函数（）{
$（'.sf菜单a'）。单击（函数（e）{
e、 预防默认值（）；
$（'.sf menu a'）.removeClass（'ativado'）；
$（this.addClass（'ativado'）；
var novaURL=$（this.attr（'href'）；
$（window.document.location）.attr（'href'，novaURL）；
});
$（“.sf菜单a[href=”+sPage+“]”）addClass（“ativado”）；
});
在这种情况下，也许您应该使用ajax。但我需要切换到另一个页面，无法在同一页面上加载..：（我在这里进行了测试，如果我对“$（'.sf menu a'）的前3行进行了注释。单击（函数（e）{”部分，它会工作。因此，错误必须在这3行中。这只会阻止项目的默认事件。。如果我出现这几行。。页面会更改，但我单击的菜单没有“激活”我还没有测试它。你可能需要稍微调整一下。我可以得到名称，但没有将样式应用到链接菜单。我忘记了属性选择器周围的引号。
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>