javascript - 在单击菜单项时将网站 url 更改为 http ://my. url#menuitem？

Question

我正在编写一个小型网站，我已经在其中实现了一个 JavaScript 代码，以便在单击菜单栏中的元素时更改为 div 的内容。我知道有问题，如果有人刷新网站，他们又会回到起始页。我想更改此设置，以便将菜单项的名称添加到 url 前面带有 #。如果您单击文章内容概述中的元素，维基百科会以某种方式执行此操作。

我现在的问题是如何实现这一目标？

这是我当前的 JavaScript 代码:

$(function() {
        $('#menu ul li a').on('click', function(e) {
                e.preventDefault();
                var page = $(this).attr('href');
                $('#content').load(page);
        });
});

这是我的 HTML 的菜单部分:

<div id="menu">
        <ul>
                <li><a href="./content/ueber_mich.html">Über mich</a></li>
                <li><a href="./content/kinesiologie.html">Kinesiologie</a></li>
                <li><a href="./content/koerbler_symbole.html">Körbler Symbole</a></li>
                <li><a href="./content/energiearbeit.html">Energiearbeit</a></li>
                <li><a href="./content/ernaehrungsberatung.html">Ernährungsberatung</a></li>
                <li><a href="./content/diaetberatung.html">Diätberatung</a></li>
                <li><a href="./content/food_coach.html">Food Coach</a></li>
                <li><a href="./content/heilkraeuterberater.html">Heilkräuterberater</a></li>
                <li><a href="./content/heilkraeuterprodukte.html">Heilkräuterprodukte</a></li>
                <ul>
                        <li><a href="./content/salben.html">Salben</a></li>
                        <li><a href="./content/oele.html">Öle</a></li>
                        <li><a href="./content/pflege.html">Pflege</a></li>
                        <li><a href="./content/bad_dusche.html">Bad/Dusche</a></li>
                        <li><a href="./content/allerlei.html">Allerlei</a></li>
                </ul>
        </ul>
</div>

对于糟糕的描述，我深表歉意，我完全不知道如何调用它。

Answer 1

你可以试试这个:-首先在菜单中添加一个属性。

 <div id="menu">
    <ul>
            <li data-btn-name="ueber_mich"><a href="./content/ueber_mich.html">Über mich</a></li>
            <li data-btn-name="kinesiologie"><a href="./content/kinesiologie.html">Kinesiologie</a></li>

    </ul>
 </div>

在点击菜单时改变页面的位置散列

 $(function() {
    $('#menu ul li a').on('click', function(e) {
            e.preventDefault();
            var page = $(this).attr('href');
            window.location.hash = $(this).attr('data-btn-name');
            $('#content').load(page);
    });
 });

第一次打开页面时，根据hash加载内容。

 $('document').ready(function(){
   if(window.location.hash){
         $('#content').load('./content/'+window.location.hash+'.html');
     }
 })