how can i get the url of the content home html in adress bar by jquery load function

0 votes

I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar. how can I get the URL of the content( home.html) in the address bar?

 index.html


 <!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="https://www.edureka.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-grid.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <link rel="stylesheet" href="css/bootstrap-reboot.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/carousel.js"></script>
    <script src="js/larelapa.js"></script>
    <script
        $(function() {
            $("#home").click(function() {
                $('#container').load('home.html');
            });
        });

        $(function() {
            $("#about").click(function() {
                $('#container').load('about.html');
            });
        });
        $(function() {
            $("#contact").click(function() {
                $('#container').load('contact.html');
            });
        });
        $(function() {
            $("#policy").click(function() {
                $('#container').load('policy.html');
            });
        });
    </script>
</head>
<body id="bg">

            <a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>  

    </div>
    <div style="position: absolute; bottom: 0;">

       <li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
       <li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
       <li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
    </div>
</nav>
            <div id="container"></div>
</div>
    </body>

</html>




    home.html

<!DOCTYPE html>
<html lang="en">
<head>   
</head>
<body>
<div  class="container-fluid row">  
</div>
</div>
</body>
</html>

after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark. I am a newbie to javascript.

Jul 28, 2022 in Web Development by gaurav
• 23,260 points
693 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
0 votes

You need to use

history.pushState(stateObject, "title", URL);

it would look like this:

    $(function() {
        $("#home").click(function() {
            $('#container').load('home.html');
            window.history.pushState({url: "home.html"}, "", "home.html");
        });
    });

But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.

answered Jul 28, 2022 by rajatha
• 7,680 points

edited Mar 5

Related Questions In Web Development

0 votes
1 answer
0 votes
0 answers

How to get the value of a checkbox flipswitch in JQuery Mobile 1.4.5?

I'm using following markup to create a ...READ MORE

Aug 22, 2022 in Web Development by gaurav
• 23,260 points
705 views
0 votes
1 answer

How do you get the value of a selected option in a dropdown using jQuery?

To get the selected value of an ...READ MORE

answered Nov 13, 2024 in Web Development by kavya
174 views
0 votes
1 answer
0 votes
1 answer

How do I handle dynamic DOM elements in jQuery that are added after the initial page load?

To deal with dynamic DOM elements added ...READ MORE

answered Dec 13, 2024 in Web Development by Navya
98 views
0 votes
0 answers

Get current URL with jQuery?

I am using jQuery. How do I ...READ MORE

Jun 29, 2022 in Web Development by gaurav
• 23,260 points
636 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,520 points
1,565 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
16,581 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,840 points
23,852 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP