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

Changing the website-url to http://my.url#menuitem on click on menu item?

本文关键字：url#menuitem my 单击 菜单项 http 网站      更新时间：2023-09-26

我正在编写一个小网站，我已经实现了一个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>

很抱歉描述不好，我完全不知道如何称呼它。

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

 <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);
    });
 });

首次打开页面时，根据哈希加载内容。

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

如果文本名称与文件名相同，您可以简单地使用它：

    $(function() {
        $('#menu ul li a').on('click', function(e) {
                e.preventDefault();
                var page = $(this).attr('href');
                window.location.hash = $(this).text();// if you want to show text of the li
                console.log($(this).text());
                $('#content').load(page);
        });
});
相关文章：