我创建了一个母版页，其中有标题.在标题部分有一些链接.我想在不影响母版页的情况下突出显示这些链接

Question

我正在创建asp.net web应用程序项目。我创建了一个页眉和页脚的主页。在标题部分有一些链接，如果我点击链接，链接到他们自己的aspx文件，所有的aspx文件都是使用母版页面创建的…如何在不影响主页内容的情况下突出显示每个链接。

这是我的代码:(我放的行星号是链接)

<!-- header start -->
<li><a href="Default.aspx" class="Active">Home</a></li> *
          <li><a href="what.aspx">What We Do</a></li> *
          <li><a href="activities.aspx">Our Activities</a></li> *
          <li><a href="projects.aspx">Our Projects</a></li> * 
          <li><a href="contact.aspx">Contact</a></li> *
<!-- header start -->

Answer 1

示例:Home.aspx,WhatWeDo.aspx..你的菜单li0:Home.aspx,li1:WhatWeDo.aspx…你可以在母版页

使用全局javascript

if(location.href.indexOf("Home.aspx")>0)setactivecss(0) else if(location.href.indexOf("WhatWeDo.aspx")>0)setactivecss(1)

为所选页面设置活动CSS您可以按照我的建议尝试自己的代码。希望能有所帮助

Answer 2

Idea1:在特定页面添加样式，引用href link。例如，在what.aspx中，您需要像下面这样添加它。

<style>
  li.a[href='what.aspx']{background-color:red; color:#fff;}
</style>

Idea2:为每个li添加类。

 <li class="default"><a href="Default.aspx">Home</a></li>
 <li class="what"><a href="what.aspx">What We Do</a></li>
 <li class="activity"><a href="activities.aspx">Our Activities</a></li>
 <li class="projects"><a href="projects.aspx">Our Projects</a></li>
 <li class="Contact"><a href="contact.aspx">Contact</a></li>

应用特定页面上类的样式。比如。Aspx你需要像下面这样添加它。

<style>
  li.what{background-color:red; color:#fff;}
</style>

Answer 3

你可以用jQuery来实现

添加id 'li-home'到你的主页链接列表项，并给列表一个id 'menu'

<ul id='menu'>
  <li id="li-home"><a href="Default.aspx" class="Active">Home</a></li>

然后使用jQuery

var path = window.location.pathname;
if (path.trim() == "/") {
    //covers the case of the default page since default.aspx will not show
    $("#li-home").addClass("Active");
}
else {
    var items = $("#menu li");
    items.each(function (index, li) {
         var menuitem = $(li);
         if (path.trim() !== "/" && path.indexOf(menuitem.find("a").attr("href")) > -1) {
             $("#li-home").removeClass("Active");
            menuitem.addClass("Active");
        }
    });
}