Как я могу получить URL контента (home.html) в адресной строке с помощью функции jquery load ()? - PullRequest
Новая
       10

Как я могу получить URL контента (home.html) в адресной строке с помощью функции jquery load ()?

0 голосов
/ 31 декабря 2018

Я использую функцию jquery load () для загрузки содержимого в контейнер страницы индекса.страница была загружена, но URI контента не отображается в адресной строке.Как я могу получить URL содержимого (home.html) в адресной строке?

 index.html


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

    <link rel="stylesheet" href="https://www.w3schools.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>

после нажатия кнопки home в файле home.html, загруженном в контейнер файла index.html и URL-адреса, отображается http://localhost:63342/code/index.html#, которым я хочу быть http://localhost:63342/code/index.html?home, что я могузакладка.Я новичок в JavaScript.

1 Ответ

0 голосов
/ 31 декабря 2018

Вам необходимо использовать

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

это будет выглядеть так: 

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

Но вместо того, чтобы делать одно событие jquery для каждой страницы, вы должны сделать его повторно используемым, чтобы у вас был только один поддерживаемый код.

https://jsfiddle.net/fJ9wq/

Кстати, вы открываете скрипт-тегне закрыто

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...