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

1

您可以通过 :focus 状态在某种程度上实现这一点。 

#filters a:focus {
    color: red;
}

这是一个JSFiddle作为一个简单的例子。虽然并不完美

于 2013-08-06T06:01:29.617 回答
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

似乎不清楚您真正想要实现什么。我似乎了解您有一个更改页面内容的菜单，因此不会发生页面重新加载，对吗？但是我仍然不清楚菜单是否过滤（显示更少或更多）内容或是否切换内容。在第二种情况下，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 回答