使用Laravel单击<a>元素仅更改页面的一部分?

波比马鲁

我试图/admin通过分隔选项卡中的功能来使页面看起来更整洁。

现在,我正在尝试找出最佳方法。我最初的想法是仅使用CSS创建选项卡并将这些选项卡中的功能分开,但是,即使我不使用某些功能,也可以通过这种方式向后端发出请求。

现在,我假设我可以创建2个局部tags.blade.phpimages.blade.php其中将包含代码。然后,我<a>向URL添加一个参数,然后基于该参数,后端将决定要在我的部分中显示<div class="admin-content-column">我猜有点类似于添加过滤器。我在这里吗?

还可以通过使用AJAX调用使它变得更好,以便页面甚至不刷新吗?

这是我的结构admin.blade.php<div class="admin-content-column">应该根据<div class="admin-menu-column">管理员单击哪个URL来动态添加其中的内容

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

史密特·沃拉(Smit Vora)

您必须创建动态html并将其附加到类“ admin-content-column”。或者您必须为两个不同的页面创建两条路线,1)标签2)用户

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

使用 Django 仅更新 HTML 页面的一部分

如何使用AnyEvent :: HTTP仅获取页面的一部分?

我需要使用Ajax动态更改页面的一部分

如何确定在页面的某一部分中单击的jquery是否与某个元素相关?

如何使用 i18n 仅翻译 html 页面的一部分

单击按钮即可重新加载页面的一部分,使用新URL刷新整个页面

使用Paw提取登录页面后面的URL的一部分

使用setInterval()刷新我的php页面的一部分

安卓。Webview。使用Javascript显示页面的一部分

如何使用jQuery刷新页面的一部分

使用ajax重新加载页面的一部分

尽管使用了Selenium WebDriver,但只解析了页面的一部分

使用jQuery通过URL中的哈希显示页面的一部分

php 使用 get 值的问题。适用于页面的一部分但不适用于另一部分

使用CSS遮罩仅遮罩元素的一部分

如何使用Python Decorator仅更改函数的一部分?

如何使用CSS文件仅更改HTML文件的一部分?

使用sed仅更改子字符串的一部分

SKPhysicsBody仅使用SKTexture的一部分

仅使用CSV列的一部分

Python:仅使用shapefile的一部分

仅使用xml文件的一部分

是否可以使ASP.NET页面使用不同的DOCTYPE呈现页面的一部分?

使用ID的一部分查找元素

如何使用php将数据传递到我的html页面的另一部分?

如何在不使用ID的情况下导航到页面的一部分

我正在尝试使用 AJAX 将已经呈现的 Django 模板注入我的页面的一部分

仅使用递归检查给定的整数是否是给定数组元素(或其中的一部分)的总和

如何在 React 中通过单击锚标记 (<a>) 更平滑地过渡到同一页面的另一部分?