gpt4 book ai didi

javascript - Materialize CSS Sidenav 根据表单导航选择加载内容

转载 作者:行者123 更新时间:2023-12-03 04:33:34 26 4
gpt4 key购买 nike

我正在使用 MaterializeCSS 为我的公司设计登陆页面。

现在我在左侧集成了一个包含三个项目的侧边栏。如果单击某个项目,我想加载右侧的特定内容。该内容可以是另一个 HTML 页面或网站。

如何使用 Materialise 框架做到这一点?

这是我的 html 代码:

  <body>
<header>
<nav>
<div class="nav-wrapper">
<a class="brand-logo center">Monitoring Tool</a>
<ul class="left hide-on-med-and-down">
</ul>
</div>

<!-- Side Navigation -->
<ul id="slide-out" class="side-nav fixed">
<li class="logo">
<a class="brand-logo not-active">
<object id="front-page-logo" type="image/png" data="img/logo.png"></object>
</a></li>
<p class="divider" id="logo-divider"></p>
<li class="bold"><a id="nagios">Nagios</a></li>
<li class="bold"><a id="munin">Munin</a></li>
<li class="bold"><a id="usv-monitor">USV-Monitor</a></li>
</ul>
</nav>
</header>

<main>
<iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe"></iframe>
</main>

<footer class="page-footer">
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/materialize.js"></script>
<script src="js/init.js"></script>

</body>

非常感谢!

最佳答案

我错过了什么吗?只需使用 a 元素的 hreftarget 属性即可。像这样:

<a id="nagios" href="http://path/to/nagios/" target="iframe">Nagios</a></li>
<a id="munin" href="http://path/to/munin/" target="iframe">Munin</a></li>
<a id="usv-monitor" href="http://path/to/usv-monitor/" target="iframe">USV-Monitor</a></li>

<iframe width="100%" height="100%" frameborder="0" allowfullscreen id="iframe" name="iframe"></iframe>

关于javascript - Materialize CSS Sidenav 根据表单导航选择加载内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43389366/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com