将 CSS 模板转换为 asp.net 母版页

Converting CSS template to asp.net with masterpages

本文关键字：asp net 母版页 转换 CSS      更新时间：2023-09-26

我买了一个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 检测当前页面并将类添加到列表项。或此问题的任何其他解决方案。

这是一种简单的方法（使用 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 中检索页面名称，并使用它来搜索包含该页面名称作为其href的所有li中的a。将类（在您的情况下为当前类）添加到该li 。

相关文章：