0

クリックして別のページに移動したときに、jquery addClass 関数をリンクに保持する方法を理解するのに苦労しています。私はクッキーでそれを行うことができると読みましたが、私はJavaScript開発者ではなく、自分でコードを書くことはできません.

ここにこのページがあります：

http://www.nationallighting.ie/testbed/index.php/products

左側のサイドバーのカテゴリの 1 つをクリックすると、コンテンツがそのカテゴリまでスクロールし、リンクが強調表示されます。ただし、そのカテゴリ内の単一の製品をクリックすると、単一の製品ページである別のページに移動し、左側のサイドバーのリンクが強調表示されなくなります。つまり:

http://www.nationallighting.ie/testbed/index.php/products-single/bmywz220

単一の製品ページをクリックしたときに、リンクを強調表示したままにするにはどうすればよいですか?

これが私の非常に長いjqueryスクリプトです（繰り返しますが、私はjavascript開発者ではないので、できる限りのことをしています...）

    // Products hover and active state
$(function(){
$(".sidebar-products ul li a").click(function(){
$(this).addClass('active');
$('a.active').not(this).removeClass('active');
});
});
$(function(){
$("a.outdoor").click(function(){
$('.sidebar-products ul li a.outdoor').addClass('active');
$('a.active').not('.sidebar-products ul li a.outdoor').removeClass('active');
});
});
$(function(){
$("a.wall").click(function(){
$('.sidebar-products ul li a.wall').addClass('active');
$('a.active').not('.sidebar-products ul li a.wall').removeClass('active');
});
});
$(function(){
$("a.bathroom").click(function(){
$('.sidebar-products ul li a.bathroom').addClass('active');
$('a.active').not('.sidebar-products ul li a.bathroom').removeClass('active');
});
});
$(function(){
$("a.centre").click(function(){
$('.sidebar-products ul li a.centre').addClass('active');
$('a.active').not('.sidebar-products ul li a.centre').removeClass('active');
});
});
$(function(){
$("a.pendents").click(function(){
$('.sidebar-products ul li a.pendents').addClass('active');
$('a.active').not('.sidebar-products ul li a.pendents').removeClass('active');
});
});
$(function(){
$("a.crystal").click(function(){
$('.sidebar-products ul li a.crystal').addClass('active');
$('a.active').not('.sidebar-products ul li a.crystal').removeClass('active');
});
});
$(function(){
$("a.table").click(function(){
$('.sidebar-products ul li a.table').addClass('active');
$('a.active').not('.sidebar-products ul li a.table').removeClass('active');
});
});
$(function(){
$("a.spots").click(function(){
$('.sidebar-products ul li a.spots').addClass('active');
$('a.active').not('.sidebar-products ul li a.spots').removeClass('active');
});
});
$(function(){
$(".sidebar-about ul li a").click(function(){
$(this).addClass('active');
$('a.active').not(this).removeClass('active');
});
});

どんな助けでも本当に感謝しています、ありがとう!

4

2 に答える 2

0

これを達成するために必ずしも Cookie が必要なわけではありません。いくつかのオプションがあります。

  1. あなたが尋ねたように、現在のカテゴリを示す Cookie を追加します。たとえば、このjQuery プラグインを使用して、Cookie を簡単に変更できます。しかし、適切なタイミングで (製品ページをロードするときなど) この Cookie を削除する必要があるため、追加の問題が発生する可能性があります。
  2. 製品を 1 つのカテゴリにしか割り当てることができない場合、そのカテゴリを知っているので、HTML を作成するときにこのクラスを簡単に追加できます (これはサーバー側で行います)。
  3. URL にクエリ文字列を追加し (?category=MYCATEGORY)、それに基づいてクラスをメニュー項目に追加できます (サーバー側とクライアント側の両方で可能)。
于 2012-10-25T12:33:52.940 に答える
0

このコードをクリック イベントに挿入します。

$.cookie("category", 'categoryname');

これにより、メニュー項目をクリックするたびに Cookie が設定され、その後、アクティブな CSS クラスを適切な項目に割り当てることができます。あなたのすべてのリンクはすでに指定されたクラスを持っていることに気付きました.Cookieに同じ名前を使用することを選択した場合は、次のようなことができます.

$(document).ready(function() {
    $('a.'+$.cookie("category")).addClass('activeclass')
}

これで問題が解決するはずです。

于 2012-10-25T14:04:17.347 に答える