css - 突出显示菜单中的选定选项卡

Question

我的母版页中有以下选项卡式导航设置:

<div id="header">
            <div id="logo">
                <a href="../default.aspx">Logo</a>
            </div>
            <div id="menu">
                <div class="buttons">
                <ul>
                    <li><a href="../default.aspx">Home</a></li>
                    <li><a href="../books/books.aspx">Books</a></li>
                    <li><a href="../contacts/aboutus.aspx">About Us</a></li>
                    <li><a href="../contacts/contact.aspx">Contact Us</a></li>
                </ul>
                </div>
            </div>
</div>

例如，当我单击主页选项卡时，我希望它保持突出显示(例如 background-color: #1087a4;)。推荐的方法是什么？这是否必须在母版页中实现？

Answer 1

给每个链接ID, runat="server"。并从 Content Page 中找到该链接并在此处提供样式。

例如:

母版页

<div id="header">
   <div id="logo">
      <a href="../default.aspx">Logo</a>
    </div>
    <div id="menu">
      <div class="buttons">
         <ul>
           <li><a id="lbtnHome" runat="server" href="../default.aspx">Home</a></li>
           <li><a id="lbtnBooks" runat="server" href="../books/books.aspx">Books</a></li>
           <li><a id="lbtnAbout" runat="server" href="../contacts/aboutus.aspx">About Us</a></li>
           <li><a id="lbtnContact" runat="server" href="../contacts/contact.aspx">Contact Us</a></li>
         </ul>
      </div>
   </div>
</div>

首页

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

图书页面

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

所有其他页面都一样。