本地主機內部頁面鏈接不起作用（剃須刀 html 頁面）

Question

本地主機上的手風琴

我想做的是在我在本地運行的項目中的 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

`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">