Question

I'm trying to make my /admin page look cleaner by separating the functionality in tabs.

Now I'm trying to find out the best way to do it. My first thought was to just use CSS to create tabs and separate the functionality in those tabs, however, this way I make requests to my back-end even when I'm not using a certain functionality.

Now I assume I can create 2 partials tags.blade.php and images.blade.php which will contain the code. Then I'd make the <a> add a parameter to the URL and based on the parameter, the back-end will decide which partial to display in my <div class="admin-content-column">. I guess something similar to adding filters. Am I on the right track here?

Also can this be made even better by using AJAX calls so the page doesn't even refresh?

This is the structure of my admin.blade.php. The content in <div class="admin-content-column"> is supposed to be dynamically added based on which URL in <div class="admin-menu-column"> has the admin clicked.

<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）用户

单击<a> element using Laravel?

1 个答案: