CODEWITHSUNDEEP
cssasp.netnavigation
user123456
user123456

Reputation: 17

Highlight selected tab in menu

I have the following tabbed navigation setup in my master page:

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

For example when I click Home tab, I'd like it to remain highlighted (ex. background-color: #1087a4;). What is the recommended way to accomplish this? And does this have to be implemented in the Master Page?

Upvotes: 0

Views: 10769

Answers (3)

Ullas
Ullas

Reputation: 11556

GiveID, runat="server" to each link. And find that link from the Content Page and give the style over there.

For Example:

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>

Like the same for all other pages.

Upvotes: 1

Jaishankar
Jaishankar

Reputation: 168

can u Please check the below link I hope It would be helpful to you

JSFiddle

CSS:

.selected a{ color: red}

JQUERY:

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

Upvotes: 0

Daan
Daan

Reputation: 2799

You could add a class to the home list item and give that a background-color of #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

Upvotes: 0

Related Questions