Steps for activating a class on a different page by clicking a link on another page using HTML

Is it possible to have an anchor tag in demo1.html that directs to demo2.html when clicked? In demo2.html, I am using a data filter which needs to select that filter. Can this be achieved?

Demo1.html

<a href="careers.html">Bangalore </a> | <a href="#"> Mumbai </a>

Demo2.html

<ul>
    <li class="filter"><a class="selected" href="#0" data-type="all">All</a></li>
    <li class="filter" data-filter=".bangalore"><a href="#0" data-type="bangalore">Bangalore</a></li>
    <li class="filter" data-filter=".mumbai"><a href="#0" data-type="mumbai">Mumbai</a></li>
</ul>
<ul>
    <li class="mix bangalore"></li>
    <li class="mix mumbai"></li>
</ul>

I am implementing the filter plugin for this functionality. Any assistance would be appreciated.

jqueryhtmlcss

Answer №1

To start, create a custom function that can retrieve querystring parameters similar to the method discussed in this thread on Stack Overflow.

function extractQueryStringValue(parameterName) {
    parameterName = parameterName.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + parameterName + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Next, modify your hyperlinks to include the necessary query parameters:

<a href="careers.html?dataType=bangalore">Bangalore </a> | <a href="#"> Mumbai </a>

Lastly, adjust your code to target specific elements on the updated page:

$('li.filter').filter(function(){
    return $(this).attr('data-type') == extractQueryStringValue('dataType');
}).addClass('active');

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

The error of type TypeError has been encountered while using Bootstrap in conjunction with

I have encountered an issue while attempting to incorporate Bootstrap <link> and <script> tags into my HTML within an Angular project. I acquired all the content delivery network (CDN) links from this website, but unfortunately, I am receiving ...

htmlcssangularbootstrap-4electron

Retrieve data from a website's API endpoint using JSON format and display it on a

I came across a URL that displays [{"outlet_group_id": "29","outlet_group_name": "Parco","outlet_group_code": "0000010"}] and I have the following code snippet <script> $(document).ready(function() { $.getJSON('http://sampl.elinkurl.com/ ...

jqueryhtmljson

Incorporating an active class into the navigation menu

When using jQuery to add the "active" class to nav > ul > li elements for changing background color, it works fine when using href="#", but when a link like href="example.php" is added, the active class does not work and the background does not chang ...

jquerymenu

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

How can z-index and relative positioning be used to center a button with jQuery and CSS?

One issue I am facing is with a button that is located in the center of another div (container). When the button is clicked, some hidden divs appear within this container. Although they are present but initially set to display: none using CSS, and then sho ...

jquerycsspositionz-index

The propagation of data in Datatables is hindered when using AJAX and JavaScript variables

Currently, I am utilizing datatables to load data through AJAX with custom data. However, when the reference variable in the custom data is changed and the AJAX is reloaded, the value of the custom data does not update. var range=1; var DataTable=$(&ap ...

jqueryajaxdatatable

Tips for customizing the background color of hyperlinks

Hello, I am trying to figure out how to create a hyperlink with alternating background colors. Can anyone guide me on achieving this? <div class="left_column"> <div class="category"> <p>Category</p> </div> <ul ...

javascripthtmlcss

Tips for displaying the HTML content within the autocomplete box

My situation involves a text input and an HTML form where users can submit their name to retrieve information. I am using AJAX to display the usernames dynamically. <div class="hidesearch" id="search" style="width:"400px;"> <inp ...

javascripthtmlcss

Troubleshooting issues with my Bootstrap 4 responsive column layout

I recently created a basic responsive website layout with Bootstrap 4. It should display 4 columns when in tablet mode, which is when the viewport is 768px wide. However, my layout works fine up to 770px, showing 4 columns. But as soon as it hits 769px, it ...

htmlcsstwitter-bootstrapbootstrap-4

How do you identify a Selenium element using a CSS selector?

Having trouble locating the element for "Sign out" button in Selenium. I've tried using the following CSS identifier: css= div[class='sub-nav chat-bubble']>ul>div:nth-child(3)>li:nth-child(4)>a Could someone please help me modi ...

cssselenium

Tips for shifting the canvas to the back using JavaScript

I am pondering how to make the box move backward once it reaches 1000px (canvas.width), but I am unsure how to proceed after the If condition. Here is my script, can anyone help me out? var canvas = document.querySelector("canvas"); var canvasCT = canvas ...

javascripthtmljquerycanvasweb-frontend

Tips for expanding the grid elements on a Cartesian plane created using Bootstrap4 and Flex!

I am looking to create a Cartesian plane using Bootstrap 4 and Flex. The end goal is to achieve a layout similar to the image linked below: https://i.sstatic.net/THmwV.jpg The plane will consist of a 10x10 grid, with a row for the x labels and a column f ...

cssflexboxbootstrap-4grid-layout

Tips on concealing modal popup when the page refreshes successfully

I implemented a progress modal popup to show progress for page reloads. This script is set to the master page and injects the progress modal popup when the form submit event is fired: <script type="text/javascript"> function ...

javascriptjqueryasp.net

Skipping the first post by adjusting the posts per page and offset in WordPress

Whenever I make a simple ajax call to load 3 posts on my WordPress website, I encounter an issue where the first 3 results always skip the very first post in the database. The Ajax call is configured on page 0, and it is set to add 3 posts per page. My ex ...

phpjqueryajaxwordpress

Jquery issue: Property or method is not supported by this object

Implementing a tree structure on my JSP Page using jQuery has been quite challenging. The tree structure necessitates the import of several jQuery files. However, upon running the JSP page, I encountered an error with the message "Object doesn't suppo ...

javascriptjqueryjsp

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

.row { height: 300px; width: 300px; margin: 0 auto; box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3); } <div class="row"></div> <div class="row">< ...

htmlcss

Implementing @Font-Face in C# Code Behind

Within my stylesheet, I have defined the following: @font-face { font-family: 'light'; src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype'); } Now, in my C# code behind, I am attempting to assign the class ...

c#cssasp.netfont-face

How to prevent the default Highcharts pie from appearing on an Angular page during loading

After successfully displaying my HighCharts half-doughnut with hard-coded data, I ran into a problem when trying to fetch data from the database. The slight delay in loading the data caused an issue where a "Chart title" and a white box would appear on the ...

javascriptjqueryhtmlangularjshighcharts

What is the method for obtaining distinct hover-over values for individual items within a dropdown menu?

If utilizing angular2-multiselect-drop down, what is the correct method to obtain distinct hover over values for individual items in the drop down? When dealing with standard HTML, you can directly access each element of the drop down list if it's ha ...

javascriptcssangularhoverdropdown

Using an array to dynamically input latitude and longitude into a weather API call in PHP

I am currently working on a leaflet map project that showcases the top 10 cities in a selected country. The markers are added dynamically based on the coordinates provided in the $latLng array. For example, when Australia is chosen from the select field, t ...

javascriptphpjqueryajaxleaflet