0

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

3 回答 3

1

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

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

选项 1：服务器端脚本

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

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

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

选项 2：AJAX

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

选项 3：AJAX + HTML5 浏览器 API

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

选项 4：可链接选项卡

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

一 二三 _

选项 5：硬编码页面

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

于 2012-12-28T18:38:59.137 回答
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>
于 2012-12-28T18:56:08.180 回答
0

检查代码的这些行：

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

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

于 2012-12-28T18:38:26.860 回答