Use the href attribute along with an id to redirect to a different page and simultaneously update the class to

On my website, I have two main pages: the home page and the contact us page. The contact us page features 4 menu options, with the first option currently active. I would like to set it up so that when a user clicks on the home page button, it will navigate them to the contact us page and automatically make the second menu option active.

This is the code for the home page button:

<div class="buttons">
<a class="btn btn-danger" href="javascript:void(0)" data-toggle="modal" data-target="#exampleModalLong">Book A Service</a>
</div>

And here is the code for the contact us menu:

<div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                    <a class="nav-link mb-2 p-3 shadow active" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true" data-kmt="1">
                        <i class="fa fa-calendar-minus-o mr-2"></i>
                        <span class="text-uppercase">Book a Service</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false" data-kmt="1">
                        <i class="fa fa-car" aria-hidden="true"></i>
                        <span class=" text-uppercase">Guest Book</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" data-kmt="1">
                        <i class="fa fa-question" aria-hidden="true"></i>
                        <span class="text-uppercase">Buy a Car</span></a>

                    <a class="nav-link mb-2 p-3 shadow" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" data-kmt="1">
                        <i class="fa fa-check mr-2"></i>
                        <span class="text-uppercase">Exchange your Car</span></a>
                </div>
javascripthtmlcssbootstrap-4

Answer №1

this approach is lengthier, but it does the job

        <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            <a class="nav-link mb-2 p-3 shadow active book_service" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="true" data-kmt="1">
                <i class="fa fa-calendar-minus-o mr-2"></i>
                <span class="text-uppercase">Book a Service</span></a>
            <a class="nav-link mb-2 p-3 shadow GuestBook" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="false" data-kmt="1">
                <i class="fa fa-car" aria-hidden="true"></i>
                <span class=" text-uppercase">Guest Book</span></a>
            <a class="nav-link mb-2 p-3 shadow BuyAcar" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false" data-kmt="1">
                <i class="fa fa-question" aria-hidden="true"></i>
                <span class="text-uppercase">Buy a Car</span></a>
            <a class="nav-link mb-2 p-3 shadow Ex_Car" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false" data-kmt="1">
                <i class="fa fa-check mr-2"></i>
                <span class="text-uppercase">Exchange your Car</span></a>
        </div>


                   // code snippet for adding 'active' class on Book a Service page

                        $(document).ready(function()
                        {
                             $('.book_service').addClass('active');
                        });

                    // code snippet for adding 'active' class on Guest Book page

                        $(document).ready(function()
                        {
                             $('.GuestBook').addClass('active');
                        });

                    // code snippet for adding 'active' class on Buy a Car page

                        $(document).ready(function()
                        {
                             $('.BuyAcar').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

Guide on duplicating a Select2 element integrated with Django and Python

I am facing an issue where the select element inside a div is not cloning correctly. The Select2 element does not retain the loaded values from the Django code when cloned. Is there a way to clone the div with all the Select2 element values intact? Current ...

javascriptdjangojquery-select2

"Recently, I included a function called 'test' in the code, but I encountered an error stating that it was not recognized as a function. Can someone provide assistance

Issue Detected A 'TypeError' has been thrown: ".goal_test".click is not defined as a function Feel free to collaborate on the code by clicking this link: Please note that my modified code is enclosed within asterisk symbols. ...

javascripthtmlcss

Despite setting the necessary Access-Control-Allow-* headers, the CORS ajax call still encounters a failure

My ajax call from a third-party-hosted script to my endpoint is encountering some issues. In Chrome, the preflight call appears as follows: GENERAL Request URL: https://my_endpoints_url Request Method: OPTIONS Status Code: 200 Remote Address: 21.188.37.1 ...

javascriptajaxgoogle-chromerequest-cancelling

The text in the image caption has been drastically reduced along with the size of the image

Currently, I am dealing with the following code: <div style="min-width: 1000px;"> <p> Some text </p> <div class='div_img_left'> <img src="images/sth.png" alt="missing image" style="max-width ...

htmlcss

``There appears to be an issue with the functionality of the jQuery

I've been experimenting with using AJAX in a PHP form, but for some reason it's not working as expected. I'm at a loss trying to figure out why. Here is my code: <!DOCTYPE html> <html lang="es"> <head> <title>< ...

javascriptphpjqueryajax

Tips for adding JSON values to an object

There is a specific object called SampleObject which has the following structure: { ID: "", Name: "", URL: "", prevName: "", Code: "", } I am looking to insert the values from the JSON object below (values only): var object = { "Sample ...

javascriptjson

Add a font awesome icon to an external CSS file

Want to add a Font Awesome icon to an external CSS stylesheet? If you're using Font Awesome 5 & the free icons, you can follow this code snippet: #preview .buttons .ok { border: 1px solid #F5F5F5; border-radius: 4px; width: 28px; ...

htmlcssbootstrap-4iconsfont-awesome

implement a user input field within a div using JavaScript

I have created a lightbox in my HTML page with the following structure: <div id="container"> <input type="text" id="user_1" name="user_1" value="user_1"/><br> <input type="text" id="user_2" name="user_2" value="user_2"/>< ...

javascriptinputdjango-templates

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

htmlarraysjsonangulartypescript

Having trouble with my form validation for a university project. Not sure if it's a problem with the JavaScript or HTML

I had attempted to simplify things, but I'm at a loss as to what could be causing the issue. I'm uncertain if the return command is functioning properly or if the button is creating a problem, but I can't seem to pinpoint the exact issue. M ...

javascripthtml

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...

htmlcsstwitter-bootstrap

Contrast between Server-side and Backend operations

Can you shed some light on the disparity between Server-side and Backend? As a coding novice looking to establish a website, I intend to leverage Node.js for the backend. However, I'm a bit confused about what server-side signifies. Can you provide a ...

javascriptbackendserver-side

Struggling with implementing jquery Ajax and a php script to fetch information from a mysql database

I'm encountering issues with my current web app project in displaying a simple jpg image based on the selected radio button using jQuery AJAX along with a PHP script to interact with MySQL. Below is my ajax.js file: $('#selection').change( ...

javascriptphpjquerymysqlajax

Surprising outcomes when using MongooseJS's findOne() method

Currently utilizing Mongoose as the Object Document Mapper (ODM) alongside NodeJS, but struggling with comprehending how error handling functions. It seems to be working, however the implementation appears incorrect and does not align with the documentatio ...

javascriptnode.jsexpressmongoose

Guide on implementing register helpers with node.js and express handlebars

When loading a record, I have a select option on my form and want to pre-select the saved option. Here is the code: The Student.hbs file displays the form, with the act obj coming from the student.js route student.hbs <form> <div class="for ...

javascriptnode.jsexpresshandlebars.jsexpress-handlebars

Discover the hidden truth: Unveiling the enigma of React

I'm currently learning React and I've been working on some apps to enhance my skills and deepen my understanding. Right now, I am facing a challenge where I need to incorporate the logged user information into the Redux state. However, whenever I ...

javascriptreactjsreduxreact-reduxundefined

What is the best way to refresh the DOM following an Ajax request using jQuery?

Is there a way to dynamically update the DOM with newly added records after making a call? Should I fetch the new database record content in the callback function and then append it using jQuery? Please provide guidance if there is insufficient data to a ...

phpjavascriptjqueryajax

Getting the value of an HTML list using JavaScript

I am attempting to extract values from an HTML list <li>. <ul> <li><a>Main Menu</a> <ul class="leftbutton" > <li value="List1"><a>Sampe 1</a></li> ...

javascripthtmldom-events

What are the ways to enable VS Code's Intellisense to collaborate with AngularJS's injected services?

Hey, I've been trying to get Visual Studio Code to provide me with its intellisense for my unique framework (not Angular) app's services. Although I managed to get the standard type for such frameworks, I'm struggling to find a solution for ...

javascriptangularjsvisual-studio-codeintellisense

What is the process for appending a value to an array of JSON objects?

I have a JSON array containing objects which I need to pass the values to the DataTables. [{ _id: '58a2b5941a9dfe3537aad540', Country: 'India', State: 'Andhra Pradesh', District: 'Guntur', Division: ...

javascriptjsonnode.js