1

メインページのリストをフィルタリングするメニューを作りたいです。例えば：

<div id="filters">
   <a href="#" id="all">Все</a> 
   <a href="#" id="top40">Топ-40</a> 
   <a href="#" id="top20">Топ-20</a>  
   <a href="#" id="top10">Топ-10</a>
</div>

したがって、問題は、このメニューでアクティブなアイテムをどのように強調表示できるかということです。

私を助けてください、またはそれを行うための別のアプローチがある場合は、示してください。


アドバイスをありがとう！

4

3 に答える 3

0

「アクティブ」をどのように定義しますか？

  • 現在ホバリングしているものを意味する場合は、#filters a:hoverルールを適用することでこれを行うことができます。
  • 現在選択されているページを意味する場合は、「アクティブな」リンクにクラス名を追加するか、ID/クラスを設定することによってのみ手動で行うことができます<body>（そのようにして、「現在の」ページに基づいて複数のものをスタイルできます）。

更新: JavaScript を使用してリンクを選択する方法を次に示します。

<script type="text/javascript">
  function select (x)
  {
    var a = document.getElementById ("filters").getElementsByClassName ("active");
    for (var i = 0; i < a.length; ++i)
      a[i].className = "";
    x.className = "active";
  }
</script>

<a href="#" id="link1" onClick="select(this)">Foo</a>
<a href="#" id="link2" onClick="select(this)">Baz</a>
<a href="#" id="link3" onClick="select(this)">Bar</a>
于 2013-08-06T05:35:47.310 に答える
0

あなたが実際に達成したいことは明らかではないようです。ページのコンテンツを変更するメニューがあり、ページのリロードが発生していないことを理解しているようですよね? しかし、メニューがコンテンツをフィルタリングする (より少なく表​​示するか、より多く表示する) のか、それともコンテンツを切り替えるのかは、私には明確ではありません。2 番目のケースでは、http://jqueryui.com/tabs/が簡単なオプションのように思えます (しかし、これはより少ないコードで可能です)。

これにより、メニューでフィルタリングされるコンテンツのデモ: http://codecanyon.net/item/jquery-sort-and-order-portfolio-plugin/full_screen_preview/2669205

ご理解いただけるか、より詳しい情報をご提供いただければ幸いです。

さらなるインスピレーション: http://api.jquery.com/toggleClass/

$("#filters a").click(function () { $(this).toggleClass("active"); });

于 2013-08-06T07:04:47.107 に答える