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

您需要实施一些新技术才能实现您的目标。 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 2

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

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 3

检查代码的那些行：

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

我在这里测试评论这些线并且它有效。
也许这个e.preventDefault（）正在触发错误，其余代码无法正常工作。

带有jquery的加载菜单不会被激活

3 个答案:

选项1：服务器端脚本

选项2：AJAX

选项3：AJAX + HTML5浏览器API

选项4：可链接标签

选项5：硬编码页面