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

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中找到该链接并在那里提供样式。

例如：

Master 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>

Home Page

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

Books Page

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

与所有其他页面的内容相同。

Answer 2

您可以在主列表项中添加一个类，并为其提供＃1087a4的背景颜色。

<强> HTML：

<div id="header">
            <div id="logo">
                <a href="../default.aspx">Logo</a>
            </div>
            <div id="menu">
                <div class="buttons">
                <ul>
                    <li class="selected"><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>

<强> CSS：

.selected {
    background-color:#1087a4;
}

JSFiddle demo

Answer 3

你可以查看以下链接我希望它对你有所帮助

JSFiddle

CSS：

.selected a{ color: red}

JQUERY：

$(".menu li").click(function(){
    var str = $(this).index();
    $(".menu li").removeClass("selected");
   $(this).addClass( "selected" );
});