css not working with tabs

Question

I am not a css person. I am developing a MVC3 app where I have two partial pages linked with two tabs on main page. I want to change the tab background if its selected. Any suggestions? Please check my CSS bellow.

ul#tabs-nav a:hover,
ul#tabs-nav a:focus {
  border-color: #ddd;
  border-bottom-color: #fff;
  background: #fff;
  text-decoration: none;
  color: #555;
  }

ul#tabs-nav a:selected 
 {
    background:red;
    text-decoration:underline;
 }

HTML

<div>
    <ul id="tabs-nav">
        <li><a href="../Home/Dogs">Dogs</a></li>
        <li><a href="../Home/Cats">Cats</a></li>
    </ul>
    <div class="tabbed-contents">
        @RenderBody()
    </div>
</div>

Regards

Post some sample HTML, it's impossible to help otherwise. Also, `:selected` has no meaning -- perhaps you meant `a.selected`? — Jon, Jun 01 '12 at 15:15
Still not quite enough information, but perhaps `ul#tabs-nav a.on` is what you want. — Jon, Jun 01 '12 at 15:20
@RenderBody() is MVC3 function. It works like ASP.NET `ContentPlaceHolders`. Basically I am loading a partial page inside `
`. And I want to switch between two different partial pages using two given tabs — user1211185, Jun 01 '12 at 15:24
See [this question on highlighting a selected tab](http://stackoverflow.com/questions/10316701/how-to-highlight-selected-tab-of-master-page-in-asp-net-mvc3), is that what you're after? — Jeroen, Jun 01 '12 at 15:25

score 1 · Answer 1 · answered Jun 01 '12 at 15:54

Something like this http://jsfiddle.net/KNCH6/ This is an example at best, I don't know MVC3 so I am not sure the exact interaction you want, but maybe jquery will be your friend to add class to the tab when clicked. The fiddle i have only works when the anchor is on focus. So if you click else where the focus will be off and the effect will turn off.

score 0 · Answer 2 · answered Jun 01 '12 at 16:24

You can use jQuery to add a class to the link to highlight it: http://jsfiddle.net/w9UNb/

  $(document).ready(function(){
    $('#tabs-nav a').click(function() {
      $('ul#tabs-nav a').removeClass('selectedLink');
      $(this).addClass('selectedLink');
    });
  });

And add this to the css

 ul#tabs-nav a.selectedLink
 {
    background:red;
    text-decoration:underline;
 }

css not working with tabs

2 Answers2