将 CSS 添加到 jQuery Ui 选项卡添加答案

【问题标题】：Adding CSS to jQuery Ui Tab Add将 CSS 添加到 jQuery Ui 选项卡添加
【发布时间】：2009-06-14 21:43:02
【问题描述】：

我正在尝试在用户登录后再添加 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;
}

【问题讨论】：

标签： jquery css jquery-ui

【解决方案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);

【讨论】：

【解决方案2】：

我直接在 php 上做。

伪代码：

if (session is logged in)
    display menu_item_1 ... menu_item_n
    display menu_logged_in_item_1 .... M
else 
    display menu_item_1 ... menu_item_n

我认为您不需要 css、html 或 ajax 的任何特殊功能。我强烈建议您使用脚本语言来执行此操作，特别是如果您具有不同的用户权限（用户、管理员、编辑器...），因为您可以将它们安静地设置为与数据库的关系

【讨论】：

【解决方案3】：

dassouki：我也在我的服务器代码中这样做。但是当我从登录尝试中只返回 json 并且需要操作非常少量的 html 时。无需加载整页

【讨论】：