CODEWITHSUNDEEP
javascriptjqueryasp.netcss
Keith
Keith

Reputation: 4147

Navigation tab stay a certain color

I am using ASP.net and have a master page that utilizes navigation. My problem is when I click on a link it loads a different asp page, but the navigation tab doesn't switch to the clicked color,it reverts back to its original color. Since all the pages are loading the same, I can't just use CSS because the page is reloaded. Is there a way to write a javascript function that tells the page when it loads to display the hover color and keep it there? Since the only HTML I use is on the master page, I can't switch anything out. I'm sure there must be a way using nth-child but I can't figure it out. As for the code, a simple example is:

<div>
   <ul>
     <li>One</li>
     <li>Two</li>
     <li>Three</li>
   </ul>
</div>

So how would I get the 2nd link to switch to the hover color when loading the page?

Upvotes: 0

Views: 395

Answers (3)

Rajesh Paul
Rajesh Paul

Reputation: 7009

Use the following:

html code

<body>
    <div>
       <ul style="display:inline; background-color:lightgray; float:left">
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='one.html'; toggle_bgcolor(this);">One</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='two.html'; toggle_bgcolor(this);">Two</li>
         <li style="margin:20px; display:inline-block" onclick="frames['target'].location.href='three.html'; toggle_bgcolor(this);">Three</li>
       </ul>
       <iframe id="target"></iframe>
    </div>
</body>

JS function

function toggle_bgcolor(elem)
{
    for(var c=0; c<elem.parentNode.getElementsByTagName('li').length; c++)
    {
        elem.parentNode.getElementsByTagName('li')[c].style.backgroundColor='';
    }
    elem.style.backgroundColor='limegreen';
}

The JS-block for the onclick event in each <li> element will toggle the baclkground-color of each <li> element when another <li> is clicked.

Check this fiddle

Upvotes: 0

Scott Mermelstein
Scott Mermelstein

Reputation: 15397

It's been a while since I've played with asp, so I won't have the exact terms, but I can point you in the right direction.

First, in your master page, add unique ids to all of your nav links. This will make it trivial to access those links in your specific asp pages. It helps to do this because otherwise it's hard to select the link you want. jQuery such as $("div ul li:nth-child('2')") will select the second li that's a child of a ul that's a child of div, but that could happen anywhere on your page.

Once you have that, let's assume your nav panel looks like this:

<div>
   <ul>
     <li id="linkOne">One</li>
     <li id="linkTwo">Two</li>
     <li id="linkThree">Three</li>
   </ul>
</div>

Then, in the page that loads when Two is clicked, you need to add a script with an onLoad handler that modifies the link:

<script>
    document.onload = function() { $("#linkTwo").addClass("hover"); };
</script>

This will wait till the document loads (otherwise you may try changing an element that doesn't exist yet), then run a function that finds the specific element with the id "linkTwo" and adds the css class "hover" to it.

Obviously, this line will be different for each specific asp page - or something you can have your server-side logic calculate.

Upvotes: 1

Georgian Burungiu
Georgian Burungiu

Reputation: 81

Your question is a little unclear. But if i understood right in your case i should use a specific css class that is loaded if you determine that you are on current page.

Something like this (i don't know asp, i will put a general example)

<div>
   <ul>
     <li <?php if($CurrentPage = 'One') {echo 'class="active"';} ?>>One</li>
     <li <?php if($CurrentPage = 'Two') {echo 'class="active"';} ?> >Two</li>
     <li <?php if($CurrentPage = 'Three') {echo 'class="active"';} ?>>Three</li>
   </ul>
</div>

this will put a special class to your element. That class will have the hover color, and the problem is solved. Hope you can adapt this to asp.

Upvotes: 0

Related Questions