Jquery – Adding CSS to jQuery Ui Tab Add

cssjqueryjquery-ui

I am trying to add 2 more ui tabs after a user has logged on. First I tried doing an after.

$('#slideshow').tabs('remove', '4');
$("#slideshow ul li:last-child").after('<li><a href="#slide5">my account</a></li><li class="last"><a href="#noslide" onclick="location.href=\'/Account/LogOut\';">log off</a></li>');

This method adds the tabs, but jQuery thinks the last 2 tabs do not exist and the my account tab does nothing.

Then I tried the other method.

$('#slideshow').tabs('remove', '4');    
$('#slideshow').tabs('add', '#slide5', 'my account'); 
$('#slideshow').tabs('add', '/Account/LogOut', 'log off');

This will have the last 2 tabs added without any css below my original ul list.

The html looks as follows:

<div id="slideshow">
    <div id="slide1" class="ui-tabs-panel"></div>
    <div id="slide2" class="ui-tabs-panel"></div>
    <div id="slide3" class="ui-tabs-panel"></div>
    <div id="slide4" class="ui-tabs-panel"></div>
    <div id="slide5" class="ui-tabs-panel"></div>

    <ul id="menuslide" class="ui-tabs-nav">
    <li><a href="#slide1">i</a></li>
    <li><a href="#slide2">hope</a></li>
    <li><a href="#slide3">this</a></li>
    <li><a href="#slide4">gets fixed</a></li>
    <li class="last"><a href="#slide5">login</a></li>
    </ul>
</div>

CSS:

#menuslide {
  width: 990px;
  height: 46px;
}

#menuslide li {
  height: 46px;
  float: left;
  display: inline;
  background: url(sepslidemenu.png) no-repeat 100% 0;
}

#menuslide li.last {
  background: none;
}

#menuslide li a,
#menuslide li a:link,
#menuslide li a:visited {
  height: 36px;
  float: left;
  display: inline;
  font-size: 1.8em;
  color: #3f7da0;
  font-weight: bold;
  padding: 10px 30px 0 30px;
}

#menuslide li a:hover {
  background: url(slidemenu_hover.png) repeat-x;
  text-decoration: none;
}

Best Solution

I will answer my own question here

$("#slideshow ul li:last-child a").text('my account')
$("#slideshow ul li:last-child").removeClass('last').after('<li class="last"><a href="#" onclick="location.href=\'/Account/LogOut\';">log off</a></li>');
$('#slideshow').tabs('select', 4);
Related Question