本地主机内部页面链接不起作用（剃须刀 html 页面）

Question

accordion on localhost

我要做的是在我在本地运行的项目中的 Blazor razor html 页面中运行手风琴。这是手风琴的代码（Bootstrap css），它在在线编辑器中运行良好：

        <div class="panel panel-default">
                <div class="panel-heading">

            <h5 class="panel-title stath5" id="farmh5">
                <a data-toggle="collapse" href="#collapse1"><span class="badge badge-secondary">4.</span> Farm</a>
                </h5>

            </div>

            <div id="collapse1" class="panel-collapse collapse">
            <ul class="list-group">

            <li class="list-group-item">
                <p class="statp"><span class="badge badge-info">Quantity of:</span></p>
            </li>
                    
            <li class="list-group-item">
                <label class="statlabel" for="beefCattle"> Beef Cattle:</label><br />
                        <InputNumber id="beefCattle" class="input" @bind-Value="@Data.FarmData.BeefCattle" onwheel="this.blur()" placeholder="Beef cattle..." autofocus />
            </li>

    
           

        
            <li class="list-group-item">
                        <label class="statlabel" for="dairyCattle"> Dairy Cattle:</label><br />
                        <InputNumber id="dairyCattle" class="input" @bind-Value="@Data.FarmData.DairyCattle" onwheel="this.blur()" placeholder="Dairy cattle..." />
            </li>

     

    
        

                <li class="list-group-item">
                        <label class="statlabel" for="horses"> Horses:</label><br />
                        <InputNumber id="horses" class="input" @bind-Value="@Data.FarmData.Horses" onwheel="this.blur()" placeholder="Horses..." />
                </li>

    
        

                <li class="list-group-item">
                        <label class="statlabel" for="hogs"> Hogs:</label><br />
                        <InputNumber id="hogs" class="input" @bind-Value="@Data.FarmData.Hogs" onwheel="this.blur()" placeholder="Hogs..." />
                </li>

    
            
                <li class="list-group-item">
                        <label class="statlabel" for="sheep"> Sheep:</label><br />
                        <InputNumber id="sheep" class="input" @bind-Value="@Data.FarmData.Sheep" onwheel="this.blur()" placeholder="Sheep... " />
                </li>
            
        
            <li class="list-group-item">
                    <p class="statp" id="perBunch">Number of birds <b>per bunch:</b></p>
            </li>

            
                <li class="list-group-item">
                        <label class="statlabel" for="hens"> Hens:</label><br />
                        <InputNumber id="hens"  class="input" @bind-Value="@Data.FarmData.Hens" onwheel="this.blur()" placeholder="Hens per bunch..." autofocus />
                </li>

    
         
            <li class="list-group-item">
                        <label class="statlabel" for="breeders"> Breeders:</label><br />
                        <InputNumber id="breeders" class="input" @bind-Value="@Data.FarmData.Breeders" onwheel="this.blur()" placeholder="Breeders per bunch..." />
                </li>

    
            

                <li class="list-group-item">
                        <label class="statlabel" for="pullets"> Pullets:</label><br />
                        <InputNumber id="pullets" class="input" @bind-Value="@Data.FarmData.Pullets" onwheel="this.blur()" placeholder="Pullets per bunch..." />
                </li>
            
    
            
        
                <li class="list-group-item">
                        <label class="statlabel" for="broilers"> Broilers:</label><br />
                        <InputNumber id="broilers" class="input" @bind-Value="@Data.FarmData.Broilers" onwheel="this.blur()" placeholder="Broilers per bunch..." />
            </li>
        </ul>

            </div>
        </div>
    </div>

但是，当我在 localhost 上运行 blazor 页面并单击手风琴链接时，路径 https://localhost:44301/#collapse1 出现并且手风琴没有打开。当从真实网站而不是本地主机打开手风琴时，这是否已修复？为何如此？如何从 localhost 查看并解决此问题？ 任何帮助都将是无价的

Answer 1

Blazor 会拦截导航链接，但如果您指定目标则不会

<a data-toggle="collapse" href="#collapse1" target="_top">

另外，请记住，如果这不在您应用中的“/”路由上，则您需要在 href 中使用该路由。 例如，在“/mypage”的路线上，您的链接需要看起来像这样

<a data-toggle="collapse" href="mypage#collapse1" target="_top">

Answer 2

`https://localhost:44301/#collapse1` is this correct address?

斜线和锚点之间没有文件名 - 死胡同

---

我可能是错的，我不使用本地主机，无法检查。这是我的第一印象，但如果机器确切地知道它在哪里，它就可以处理这个问题。没有锚点打开文件？您可以创建不同类型的目录和文件结构进行测试吗？