Question

我正在使用Zurb Foundation作为客户端网站，他们可以通过Comfy Mexican Sofa（rails CMS）动态添加和删除页面。如何在顶部栏中动态地将活动类添加到活动li？

Answer 1

可以使用JQuery完成，但确切的方法取决于您的网页在地址栏中的显示方式。

以下假设URL如下：

http://example.com/page/stuff_not_counted

提供的代码会将page的值添加到页面变量中。然后，您可以使用此选项来选择li元素，以使用addClass jQuery方法添加类active

正如您所看到的，此代码段会将该类附加到页面上的所有li元素。您需要确定一个合适的Selector来确保只有li个元素中的一个获得此类。这通常是id，如下所示。

$("#" + page) - 此选择器函数获取id =＆＃34; page＆＃34;其中page是变量中的值。

<强> CODE

<script>

// Retrieve current Pathname
var path = $(location).attr('pathname');
// Removes everything before and including the first /
var page = path.split('/')[1]
// Make sure we are working
console.log(page);
$( "#" + page ).addClass( "active" );

</script>

jsFiddle

如果您需要针对不同的URL语法或Selector方法进行重构，请提供示例URL和li元素。

动态地将.active类添加到基础顶部栏

1 个答案: