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'; } ?>">

そのページにいる場合、クラスが追加されます。これは、私がすぐにまとめようとしている Web サイトに対して主に行っていることです。

オプション 2: AJAX

また、ajax 呼び出しを行ってサーバーからデータを取得し、ページのコンテンツを更新することもできます。URL やユーザーのブラウザ履歴が更新されないため、これは良くありません。ページ自体であなたのページを閲覧しているように見えます。

オプション 3: AJAX + HTML5 ブラウザー API

このオプションはすべての中で最も洗練されていますが、最新のブラウザーでのみ機能します。AJAX 呼び出しを行い、HTML5 history APIを使用してユーザーの履歴を変更します。これにより、新しいコンテンツが表示されると同時に、ブラウザ ウィンドウの URL が変更され、ユーザーの履歴に新しいページが追加されます。これらはすべてリロードなしで行われます。かなりすごい。

オプション 4: リンク可能なタブ

この解決策はかなり悪いと思いますが、それはあなたが望むことをするでしょう. 多くの可能性があります。ここにそれらすべてをリストしようとして、車輪を再発明するつもりはありません。それらのいくつかを表示して、あなたに合ったものがあるかどうかを確認できます.

ワン ツー スリー

オプション 5: ハードコーディングされたページ

もう 1 つのオプション (おそらく最悪の方法) は、各 Web ページにメニュー コードを配置することです。次に、各ページで、クラスを適切なリンクに追加できます。あなたのウェブサイトが一握り以上のページである場合、維持するのは面倒なので、私はこれをしません.

于 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 に答える