如何突出显示母版页中的导航栏？

Question

主页

                

添加联系人

                

上传联系人

                

发送邮件

                

出口联系

            

单击???

时如何突出显示每个链接

Answer 1

我希望master page中的菜单链接如下所示。

Master Page

<ul>
  <li>
      <asp:LinkButton ID="lbtnHome" runat="server" 
           PostBackUrl="~/Home.aspx">HOME</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnAdd" runat="server" 
           PostBackUrl="~/Add.aspx">Add Contact</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnUpload" runat="server" 
           PostBackUrl="~/Upload.aspx">Upload Contact</asp:LinkButton>
  </li>
  <li>
      <asp:LinkButton ID="lbtnSend" runat="server" 
           PostBackUrl="~/Send.aspx">Send Mail</asp:LinkButton>
  </li>
  <li><asp:LinkButton ID="lbtnExport" runat="server" 
           PostBackUrl="~/Export.aspx">Export Contact</asp:LinkButton>
  </li>

然后在内容页面中找到每个LinkButton，并使用JavaScript提供样式 将以下JavaScript添加到所有content Pages。

Home Page

<script type="text/javascript">
  var link = document.getElementById('<%=Master.FindControl("lbtnHome").ClientID %>');
  link.style.color = '#3851bc';
</script>

---

Add Contact

<script type="text/javascript">
  var link = document.getElementById('<%=Master.FindControl("lbtnAdd").ClientID %>');
  link.style.color = '#3851bc';
</script>

与所有其他页面相同。
根据您的需要更改颜色。

Answer 2

您可以使用新样式添加新的css类，这些样式应在单击时应用于菜单项。 例如

 .active{
 background-color:red; // example
 }

然后添加一个javascript函数，将onClick.set中的样式设置为onClientClick到所有菜单项。在JS函数中，您应该将您创建的css类设置为菜单项。 你可以这样做。

document.getElementById("YourElement").className = "active";