jquery - 添加 CSS 到 jQuery Ui Tab 添加

Question

我正在尝试在用户登录后再添加 2 个 ui 选项卡。首先，我尝试做一个之后。

$('#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>');

此方法添加选项卡，但 jQuery 认为最后 2 个选项卡不存在并且我的帐户选项卡不执行任何操作。

然后我尝试了另一种方法。

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

这将在我的原始 ul 列表下方添加最后 2 个标签，没有任何 css。

html 如下所示:

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

Answer 1

我会在这里回答我自己的问题

$("#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);