Question

我想做的是在本地运行的项目的Blazor剃刀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>

但是，当我在本地主机上运行blazor页面并单击手风琴链接时，会显示路径https://localhost:44301/#collapse1并且手风琴无法打开。从实际网站而不是本地主机打开手风琴时，此问题是否解决？为何如此？如何从localhost看到它并解决此问题？任何协助都是无价的

Answer 1

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

斜杠和锚点之间没有文件名-死角

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

Answer 2

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

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

此外，请记住，如果该路径不在应用程序的“ /”路由中，则需要在href中添加该路由。例如，在“ / mypage”路线上，您的链接需要像这样

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

Localhost内部页面链接不起作用（剃刀HTML页面）

2 个答案: