<a>使用Laravel</a>單擊<a>元素</a>僅更改頁面的一部分<a>嗎？</a>

Question

我試圖通過分隔選項卡中的功能來使/admin頁面看起來更整潔。

現在，我正在嘗試找出最佳方法。 我最初的想法是僅使用CSS創建選項卡並將這些選項卡中的功能分開，但是，即使我不使用某些功能，也可以通過這種方式向后端發出請求。

現在，我假設可以創建2個tags.blade.php代碼，其中將包含代碼tags.blade.php和images.blade.php 。 然后，我要<a>向URL添加一個參數，然后基於該參數，后端將決定要在我的<div class="admin-content-column">顯示哪個部分。 我猜有點類似於添加過濾器。 我在正確的軌道上嗎？

還可以通過使用AJAX調用來使此功能更好，從而使頁面甚至不刷新嗎？

這是我的admin.blade.php的結構。 應當根據<div class="admin-menu-column">中的哪個URL單擊<div class="admin-menu-column">來動態添加<div class="admin-content-column"> 。

<div class="admin-flexbox">

    <div class="admin-menu-column">
        <div class="admin-menu-container">
            <ul class='admin-menu-ul'>
                <a href='#'><li><i class="fas fa-tags"></i> Tags</li></a>
                <a href='#'><li><i class="fas fa-users"></i> Images</li></a>
            </ul>
        </div>
    </div>

    <div class="admin-content-column">

    </div>

</div>

 *, *:after, *:before { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; } a { color: #f1f1f1; } html { font-size: 16px; } .admin-flexbox { display: flex; } .admin-menu-column { flex: 1; flex-grow: 0; flex-shrink: 0; flex-basis: 250px; height: 1000px; } .admin-menu-container { background-color: #151719; } .admin-menu-ul li { display: block; padding: 15px 20px 15px 20px; } .admin-content-column { flex: 1; background-color: gray; height: 300px; } 

 <div class="admin-flexbox"> <div class="admin-menu-column"> <div class="admin-menu-container"> <ul class='admin-menu-ul'> <a href='#'><li><i class="fas fa-tags"></i> Tags</li></a> <a href='#'><li><i class="fas fa-users"></i> Users</li></a> </ul> </div> </div> <div class="admin-content-column"> </div> </div> 

Answer 1

您必須創建動態html並將其附加到類“ admin-content-column”。 或者您必須為兩個不同的頁面創建兩條路線，1）標簽2）用戶