Question

我现在正在学习Framework7，但我遇到了这个问题。我创建了两个页面，这是文件

的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=1, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#673ab7">

    <title>Ciptaloka Editor</title>

    <link rel="icon" href="assets/img/favicon.png">
    <link rel="stylesheet" href="assets/css/framework7.material.min.css">
    <link rel="stylesheet" href="assets/css/framework7.material.colors.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body class="theme-teal">

<div class="views">
    <div class="view view-main">
        <div class="pages navbar-fixed">
            <div data-page="index" class="page">
                <!-- off canvas -->
                <div class="panel-overlay"></div>
                <div class="panel panel-left panel-cover">
                a
                </div>

                <!-- Navbar -->
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="left">
                            <a class="link open-panel" data-panel-left>
                                <i class="icon material-icons">menu</i>
                            </a>
                        </div>
                        <div class="center">
                            Custom T-Shirt
                        </div>
                        <div class="right">
                            <a class="link">
                                Done
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Toolbar -->
                <div class="toolbar toolbar-bottom tabbar tabbar-labels">
                    <div class="toolbar-inner">
                        <a href="#produk" class="link tab-link active">
                            <i class="icon material-icons">dashboard</i>
                            <span class="tabbar-label">Produk</span>
                        </a>
                        <a href="#image" class="link tab-link">
                            <i class="icon material-icons">add_a_photo</i>
                            <span class="tabbar-label">Image</span>
                        </a>
                        <a href="#text" class="link tab-link">
                            <i class="icon material-icons">text_fields</i>
                            <span class="tabbar-label">Text</span>
                        </a>
                        <a href="#clipart" class="link tab-link">
                            <i class="icon material-icons">photo_filter</i>
                            <span class="tabbar-label">Clipart</span>
                        </a>
                    </div>
                </div>

                <!-- Content -->
                <div class="page-content">
                    <div class="content-block">
                        <div class="tabs">
                            <div class="tab active" id="produk">
                                <a href="index2.html">Go home 2</a>
                            </div>
                            <div class="tab" id="image">
                                Image
                            </div>
                            <div class="tab" id="text">
                                Text
                            </div>
                            <div class="tab" id="clipart">
                                Clipart
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="assets/js/framework7.min.js"></script>
<script type="text/javascript" src="assets/js/my-app.js"></script>
</body>
</html>

index2.html

<div data-page="index2" class="page">
    <!-- Navbar -->
    <div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a class="link open-panel">
                <a href="index.html">
                    <i class="icon material-icons">back</i>
                </a>
            </a>
        </div>
        <div class="center">
            Custom Case
        </div>
    </div>
    </div>

    <!-- Content -->
    <div class="page-content">
        <div class="content-block">
            Success direct page
        </div>
    </div>
</div>

当我点击index.html上的'go home 2'时，它成功地直接指向index2.html，内容会显示，但不会显示导航栏，它只显示背景，但文本是隐藏的。这是我的剧本：

为什么会这样？我想念一下吗？

Answer 1

您的导航栏位于数据页面内切换到index2并更改所有页面。让navbar在外面 - ＆gt; view-main - ＆gt;导航栏然后是数据页

抱歉，我的英语不好。

Framework7：当我移动到其他视图时，Navbar被隐藏

1 个答案: