• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1163
  • Last Modified:

Highlight Current Page's Tab

Hi experts,

I am developing a project in ASP.NET using Visual Web Developer 2008 Express Edition. I have a tab menu which works perfect. I would like for a tab to stay orange while on the page that the tab links to. For example, when on Default.aspx, I would like Home tab to be highlighted. Is there any way to do that? I am using Master page. It would be easy if I didn't.

Please use IE to look at this page. It doesn't display quite right in FF.

http://www.titanmusicstore.com

Thank you.
0
Yury Merezhkov
Asked:
Yury Merezhkov
  • 4
  • 2
  • 2
1 Solution
 
iDeejCommented:
in the home page you could give the body tag an id="home" and then give all your tabs id's as well E.G. id="tabHome"

The write this CSS

#home #tabhome {
  background: /*set to orange background*/;
}

because the home page is the only page that has id = home in the body tag it is the only page that this style will effect.

You can then go and do it with all other pages <body id="catalog"> for the catalog page etc.

0
 
RamanhpCommented:
<style>
span.col2 {
        margin-left: 10em;
 width:100px;
}
 
span.col3 {
        margin-left: 10em; width:100px;
 
}
 
span.col4 {
        margin-left: 10em; width:100px;
 
}
 
 
div.row {
overflow: auto;
font-weight: bold;
width: 100%;
float: left;
padding-top: 5px;
padding-left: 0px;
padding-bottom: 5px;
padding-right: 0px
}
</style>
 
<div class="row">                      
Item One                        
<span class="col2">
Item Two
</span>
<span class="col3">
Item Three
</span>
<span class="col4">                            
Item Four
</span>
</div>
                       
<div class="row">
Item Five                      
<span class="col2">                    
Item Six                                                
</span>
<span class="col3">
Item Seven
</span>
<span  class="col4">                    
Item Eight
</span>
</div>
0
 
RamanhpCommented:
oh sorry, please ignore my reply, got pasted in the wrong window

Thanks
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Thank you! But I have a master page. I don't have body tags on each page. Just on the master page.
0
 
iDeejCommented:
I've not used ASP but is there a way you can dynamically set an id to a containing element or set class="tabOn" in a li of you navigation?
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
This is my first website in ASP .NET. I don't know :) I'll continue researching.
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
iDeej, thanks man! I figured out how to assign id's dynamically and used CSS that you provided. It works. Check it out :)
0
 
Yury MerezhkovDevelopment Team LeadAuthor Commented:
Great solution!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now