Question

我正在使用 MaterialiseCSS 为我公司设计目标网页。

现在我在左侧集成了一个带有三个项目的侧边栏。如果单击某个项目，我想在右侧加载特定内容。该内容可以是另一个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>

非常感谢！

Answer 1

我错过了什么吗？只需使用href元素的target和a属性即可。像这样：

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

根据导航选择实现CSS Sidenav加载内容

1 个答案: