Tips for retaining the active li item selection after a page refresh

I am currently utilizing bootstrap for my web interface. I am encountering an issue where, when I click on a specific list item, the page redirects to a new webpage and the active item reverts back to the first item. How can I resolve this problem?

    <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>
jquerycsstwitter-bootstrap

Answer №1

In order to manage that, it is recommended to utilize either localstorage or cookies.

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

Credit to How do I keep the current tab active with twitter bootstrap after a page reload?

The code above uses tabs, but consider trying to replace them with li's as needed.

Answer №2

To achieve this effect, you can utilize pure CSS. Simply assign classes to the HTML tags within your pages and unique classes to each list item (li).

For instance, HTML (for the profile page) would look like:

<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 {
    /*styling for active state*/
}

Note: 

<html class="profilePage" >
should be changed according to the specific page being viewed.

For example, on the My Match page:

<html class="matchPage" >

And on the About Me page:

<html class="aboutPage" >

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Div behaving as a radio input

I have customized radio buttons to look like buttons using JavaScript. However, on page load, both buttons automatically receive the 'active' class instead of only when they are selected. Additionally, the fadeToggle function in the if-statement ...

javascriptjquerycssinput

Having trouble displaying WordPress posts in a grid view on a single page

Currently, I am working on customizing a Wordpress theme that features a grid view. My goal is to dynamically load posts on the same page, similar to how it works on Twitter. I have experimented with various plugins such as infinite scroll, but unfortunate ...

jqueryajaxwordpressgridviewinfinite

Twitter Bootstrap Dropdown PHP link fails to function

Recently, I designed a dropdown menu to be used on a PHP page. The main button, which contains the dropdown links, needs to still function as a link to another page. Despite following all the instructions provided on the Bootstrap website, the main button ...

javascriptphpjqueryhtmltwitter-bootstrap

Creating a jQuery plugin hierarchy: The ultimate guide to nested plugins

Recently, I was tinkering with a small project that required me to use some custom jQuery plugins. As I have 5 different plugins, I thought of consolidating them into one major plugin to streamline the process and avoid cluttering my HTML. I envisioned a ...

jquerywebfrontend

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...

cssflexbox

Activating Bootstrap modal when a navigation link is clicked

Just started a site for a client and new to Bootstrap. I've got the layout down - full-width page with "Top Nav" within the nav bar, looking to create a modal effect drop-down. When clicking on "About", it should trigger the .modal function. However, ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the method for tallying the outcomes using autocomplete?

Is there a way to track and display the number of results that appear in the autocomplete feature? This is the HTML for the input field: <input name="input_1" id="input_1_1" type="text" value="" class="medium ui-autocomplete- input" tabindex="1" aut ...

jqueryjquery-ui

Using BeautifulSoup to extract text and CSS from HTML pages

Here is an example of HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css" ...

pythonhtmlcssbeautifulsoup

How do I use jQuery to remove a dynamically added class from the page's header?

When using an inline editor to modify css classes, I encounter the need to remove and then re-add a class definition after making changes. Additionally, users have the option to delete elements, so it's important that the definition is also deleted. ...

javascriptjquerycsshtml

The sticky-top class in Bootstrap-4 seems to be malfunctioning

I am trying to create a layout with two columns, where the left column remains fixed while scrolling and only the right column scrolls. I don't want to use position: fixed because it affects the document flow. Although I have looked into using the Bo ...

cssbootstrap-4sticky

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

I am currently in the process of adding a feature that allows users to choose between a dark or light theme, as well as select a specific theme color for the app. The implementation involves using CSS filters such as invert(1) for the dark theme and hue-ro ...

javascripthtmlcss

Add jQuery and underscore libraries to an AngularJS component

For my new service, I am incorporating angularjs, underscore, and jQuery: myModule.factory('MyService', ['MyResource', function (MyResource) { .... // Utilizing _ and $ }]); How can I properly inject underscore and jQuery int ...

javascriptjqueryangularjsunderscore.js

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

javascriptjqueryajaxexpress

Fill Datalist with Database Information

As a beginner in javascript and php, I am trying to populate a datalist from a mysql table. However, I am facing some difficulties with the relevant codes provided below. Although I can fetch data from the database, I am struggling to display them in the d ...

javascriptphpjqueryjsonhtml

Is there a way I can decrease the width of the input field on the left side?

body { background: white; font-family: 'Ubuntu', sans-serif; } .cas { display: inline-block; border: 2px solid #0C8346; background: #0C8346; font-weight: 300; font-size: 20px; padding: 5px; width: 200px; text-align: center; ...

htmlcssbootstrap-4

My goal is to dynamically assign a class to an iframe element by identifying a specific class contained within the html of the iframe

I need assistance with adding a class to an iframe only if the body tag has a specific class name. Here is my attempt at writing some code: <iframe class='iframeContent' src='' width='100%' height='' frameborder= ...

javascriptcssclassiframe

Absolute URL in CSS file doesn't seem to be functioning properly on a local machine

Response Just sharing my solution here since I couldn't answer my own question until 8 hours had passed: I managed to resolve the issue. By removing Server.MapPath from the PreRender function, I was able to render it correctly. It was just a silly m ...

c#css

Use jQuery to achieve smooth scrolling when clicking on a link that points to a specific #div, maintaining the URL

I have a single page design with smooth scrolling implemented using jQuery with the following code: function ScrollMe(id){ var offset = $("#"+id).offset().top-50; $('html,body').animate({scrollTop: offset},'s ...

jqueryhtml

jQuery ajax doesn't function properly on the server, it only works locally

When I send a jQuery Ajax request from my front-end to the back-end to retrieve values for calculations, it works perfectly on my local web server. However, when I try it online, all I get is a result of 0 in my calculations, indicating that the Ajax respo ...

javascriptphpjqueryajax