0

我买了一个css模板。它实现了这样的导航。

 <li class="current"><a href="services.html">Services</a></li>
 <li><a href="news.html">News</a></li>
 <li><a href="portfolio.html">Portfolio</a></li>
 <li><a href="elements.html">Elements</a></li>
 <li><a href="contact.html">Contact</a></li>

它在每个 html 文件中包含导航标记，并将列表项类标记为当前页面的当前项。

现在我将其转换为母版页布局。我如何检测当前页面并使用 JavaScript 将类添加到列表项。或任何其他解决此问题的方法。

4

1 回答 1

1

这是一种简单的方法（使用 jQuery）：

function syncMenu () {
        var url = window.location.href, pageStart, pageEnd, pageName;
        pageStart = url.lastIndexOf("/") + 1;
        pageEnd = url.lastIndexOf(".");
        pageName = url.substring(pageStart, pageEnd);

        $('#Menu').find('li').removeClass('selected');
        $('#Menu').find('a[href^="' + pageName + '"]').parent().addClass('current');

}

当您的页面加载时，首先调用此函数，即在document.ready.

这个想法是您将页面的名称作为anchor href. 我们从当前 url 中检索页面名称，并使用它来搜索包含该页面名称作为a其. 向那个添加一个类（在你的情况下是当前的）。lihrefli

于 2013-10-21T11:48:52.307 回答