4

HTML テンプレートで作業していますが、HTML コードに触れることができず、CSS および JS ファイルでしか作業できません。したがって、HTMLコードを編集することはできません。

私が達成しようとしているのは、HTMLコードを編集せずに、現在のページのURLがアクティブな状態にしたいリンクと同じであることをjQueryまたはJavascriptが認識したときに、いくつかのリンクをアクティブな状態にすることです。

それを行う方法はありますか？私は多くの方法で試しましたが、運がありませんでした。

これが HTML コードです (編集できないことを忘れないでください)。

<span class="Tag_Nav_Aux">
    <a href="/my-account/create-account.aspx">Create&nbsp;Account</a>
    &nbsp;|&nbsp;
    <a href="/my-account/login.aspx">Login</a>
    &nbsp;|&nbsp;
    <a href="/my-cart/default.aspx">My Cart</a>
</span>

ユーザーがログインまたはログアウトすると HTML が変更されるため、jQuery または Javascript コードは、上記で報告したもの以外のさまざまなリンクで機能するはずです。そのため、jQuery はクラスを指定し、現在の URL と同じリンクを持つタグにTag_Nav_AuxActive クラスを追加する必要aがあります。

4

4 に答える 4

3

あなたはこのようなことをすることができます。URLからのファイル名

var filename = window.location.href.substr(window.location.href.lastIndexOf("/")+1);

その後、ナビゲーションからアンカーを取得し、いくつかのクラスを適用します。

$("span.Tag_Nav_Aux a[href*="+filename+"]").addClass('active');

activeここでは、そのリンクをアクティブなリンクのように表示するCSSクラスを作成する必要があります。

于 2012-12-26T11:43:23.327 に答える
2

このスクリプトを試してください

jQuery(function($){
    $('.Tag_Nav_Aux a').filter(function(){
       return $(this).attr('href').toLowerCase() === window.location.pathname.toLowerCase();
    }).addClass('active');
});

のCSSルールを作成します

.Tag_Nav_Aux a.active{
   // style you want the active link to have
}
于 2012-12-26T11:47:10.767 に答える
2 
$(document).ready(function() {
    var url = window.location.href.toLowerCase();

    $(".Tag_Nav_Aux a").each(function() {

        var $this = $(this);

        var href = $this.attr("href").toLowerCase();

        if(url.indexOf(href) > -1) {
            $this.addClass("active");            
        }           
    });
});​
于 2012-12-26T11:51:44.993 に答える
0

現在のページのURLを確認し、アクティブにするようなアイテムにクラスを割り当てる必要があると思います。

私は通常、サーバー側のコードを使用して、現在のURLの一致に基づいてclass="active"を配置します。

しかし、サーバーコードが必要ない場合は、JavaScriptを使用して行うことができます

var currentPage=window.location.href;

if(currentPage=="") 
{ 
 //logic to find and add a Class for the proper anchor tag
 }
于 2012-12-26T11:43:34.470 に答える