Question

我买了一个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将类添加到列表项。或任何其他解决此问题的方法。

Answer 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。我们从当前网址中检索网页名称，并使用该网址来搜索包含该网页名称a的所有li中的href。将一个类（在您的情况下为当前）添加到li。

使用masterpages将CSS模板转换为asp.net

1 个答案: