Question

我想制作将在主页上过滤列表的菜单。例如：

<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>

所以，问题是如何在此菜单中突出显示活动项目。

请帮助我，或者如果还有其他方法，请显示。

感谢您的任何建议！

Answer 1

你可以通过：focus状态来实现这一点。

#filters a:focus {
    color: red;
}

以下是JSFiddle作为简单示例。

虽然不完美

Answer 2

如何定义“有效”？

如果你的意思是你正在徘徊的那个，你可以这样做应用#filters a:hover规则。
如果您指的是当前选定的页面，则只能手动执行此操作通过向“活动”链接添加类名或设置ID /类 <body>的（<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>（这样，您可以基于 “当前”页面。）。

更新：这是一种使用JavaScript选择链接的方法。

{{1}}

Answer 3

你真正想要实现的目标似乎并不清楚。我似乎明白你有一个菜单可以改变页面上的内容，所以不会发生页面重新加载，对吗？但我仍然不清楚菜单是否过滤（显示更少或更多）内容或是否切换内容。在第二种情况下，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"); });

突出显示“a”标记中具有href =“＃”选项的菜单中的项目

3 个答案: