Question

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

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

这是我目前的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);
    });
 });

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

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

Answer 2

如果文本名称与文件名相同，则可以使用此选项：

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

单击菜单项将website-url更改为http：//my.url#menuitem？

2 个答案: