Как запомнить активный элемент li после обновления

Я использую bootstrap в качестве веб-интерфейса. Когда я нажимаю один элемент li, он перенаправляется на новую веб-страницу, и активный элемент будет первым элементом снова, как я могу решить эту проблему?Как запомнить активный элемент li после обновления

<ul id="profileTabs" class="nav nav-list"> 
     <li class="active"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li> 
     <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li> 
     <li><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li> 
    </ul>

источник

2013-09-10 Charles0429

путем добавления класса соответствующий активный класс на перенаправляется странице. –

Используя постоянное хранилище как localStorage/cookie или отправьте параметры на запрашиваемую страницу –

[Руководство по хранению DOM] (https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). – undefined

Вы должны будете использовать LocalStorage или печенье управлять этим.

$(function() { 
    //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line 
    $('a[data-toggle="tab"]').on('shown', function (e) { 
    //save the latest tab; use cookies if you like 'em better: 
    localStorage.setItem('lastTab', $(e.target).attr('id')); 
    }); 

    //go to the latest tab, if it exists: 
    var lastTab = localStorage.getItem('lastTab'); 
    if (lastTab) { 
     $('#'+lastTab).tab('show'); 
    } 
});

Код Предоставлено How do I keep the current tab active with twitter bootstrap after a page reload?

В этих вкладках кода используются, но попробуйте заменить li's вы ожидаете

источник

2013-09-10 12:30:43

Будет работать даже 'e.target.id' будет достаточно –

Спасибо, в чем смысл 'a [data-toggle =" tab "]'? – Charles0429

Я обновляю свой код, пожалуйста, помогите мне! Я новичок в boostrap и jquery. – Charles0429

Это может быть достигнуто только с помощью CSS. Вам нужно применять классы к тегам html на страницах и отдельных классах для каждого элемента li.

например. HTML (для страницы профиля)

<html class="profilePage" > 
... 
    <ul id="profileTabs" class="nav nav-list"> 
     <li class="profileMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">Profile</a></li> 
     <li class="aboutMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">About Me</a></li> 
     <li class="matchMenuItem"><a href="http://localhost/ojr/user/edit/Charles0429" data-toggle="list">My Match</a></li> 
    </ul> 
... 
</html>

CSS

.profilePage .profileMenuItem, 
.aboutPage .aboutMenuItem, 
.matchPage .matchMenuItem { 
    /*active styles here*/ 
}

нотабене <html class="profilePage" > будет изменяться в зависимости от того, на какой странице вы находитесь

E.g. Для страницы My Match

<html class="matchPage" >

Для Обо мне страницы

<html class="aboutPage" >

источник

2013-09-10 12:56:26

Один раз один активный элемент. Когда я нажимаю на один элемент, он перенаправляется на одну страницу (может быть, не на текущую), так как CSS мог достичь моей цели? – Charles0429

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

Как запомнить активный элемент li после обновления

ответ

Смежные вопросы