Добавление CSS в jQuery Ui Tab Добавить

Question

Я пытаюсь добавить еще 2 вкладки пользовательского интерфейса после того, как пользователь вошел в систему. Сначала я попытался сделать после.

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

Это будет иметь последние 2 вкладки, добавленные без css ниже моего первоначального списка ul.

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

Answer 2

Дассоуки: Я делаю это и в коде моего сервера. Но когда я возвращаю только json из попытки входа и мне нужно манипулировать очень небольшим количеством html. Нет необходимости полной загрузки страницы

Answer 3

Я делаю это прямо на 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. Я настоятельно рекомендую вам делать это на языке сценариев, особенно если у вас есть разные пользовательские привилегии (пользователь, администратор, редактор ...), поскольку вы можете изящно настроить их в соответствии с вашей базой данных