0

サイド ナビゲーション ペインを持つアプリを開発していますが、一部のページで問題のコンテンツの配置が間違っているわけではありません。

下にスライドするコンテンツ

スライド時のスクリーンショット

適切なコンテンツ

滑りが良いスクリーンショット

コード これはナビゲーション用のコードです

<label class='side-menu-overlay active' for="sideMenuHandler"></label>
<div class='side-menu'>
    <ul class="sideMenuList" style="-webkit-padding-start: 0px;">
        <li class="menuList" id="about" onclick="loadPage1('About Calendar')"><label class="textStyle"
             for="sideMenuHandler">About Calendar</label></li>
        <!-- <li class="menuList" id="email"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage2('Email us')">Email
                Us!</label></li>
        <li class="menuList" id="share"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage3('Share App')">Share
                the app!</a>
        </label></li>
        <li class="menuList" id="share"><label class="textStyle"
            for="sideMenuHandler" onclick="loadPage4('Rate')">Rate the
                app!</a>
        </label>
        </li> -->
        <li class="menuList" id="home" onclick="loadPage5('Calendar')"><label class="textStyle"
            for="sideMenuHandler">Home!</a>
        </label></li>
    </ul>

</div>

本体のコード

これで「appcontent」部分がajaxでワイプされ、aboutusコンテンツが配置されます

<input type="checkbox" class="side-menu-handler" id="sideMenuHandler">

<div class="main">
    <div class="top-bar">
        <label class="list-btn" id="menuButton" for="sideMenuHandler">
            <div class="menu-icon">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
            <div class="appName">Calendar</div>
        </label>
    </div>
    <div class="appContent">
        <div data-role="content" id="calendarPart">
            <div id="calendar">
                <div data-role="header" data-position="fixed">
                    <!-- <h1>Single-page application</h1> -->
                </div>
                <!-- <p>This is a single page boilerplate template that you can copy
                to build your first Tizen Web UI Framework page.</p> -->
                <iframe style="width:75px;height:43px; border:none;position: absolute;top:85px;right:0;" src="http://dev.skyle.co/zen/a.html"></iframe>
                <div class="tabs">
                    <ul class="tab-links">
                        <li id="2013Year" class="active"><a href="#tab1">2013</a></li>
                        <li id="2014Year"><a href="">2014</a></li>
                        <li id="2015Year"><a href="">2015</a></li>
                        <!-- <li><a href="#tab4">Tab #4</a></li> -->
                    </ul>

                    <div class="tab-content"
                        style="width: 100%; position: absolute; left: 1px; top: 49px; height: 352px;">
                        <div id="tab1" class="tab active" id="lyear">
                            <div class="container">
                                <div class="row">
                                    <div class="g4">
                                        <div id="eventCalendarInline"
                                            style="position: absolute; left: 71px; top: 81px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

About usページのコード

<div data-role="content" id="aboutPart">
<div>
    <h2>About:</h2>
    <p
        style="text-align: justify; font-size: medium; font-family: Source Sans Pro; padding-left: 17px; padding-right: 17px;">
        This app informs about the holidays and festivals in India. Festivals
        in India carry important message and plays important role in
        symbolizing the tradition and culture of India. This App provides
        list of major Indian festivals grouped by months. This App includes
        festivals and dates for 2013, 2014,2015 and 2016 (i.e. Previous year,
        Current year and Upcoming two years). Users can plan their holidays
        by using this app.</p>
    <h2>Features:</h2>
    <ul style="font-size: initial; font-family: Source Sans Pro; width: 83%;">
        <li>Monthly calendar view with all Indian festival, dates of
            holidays are highlighted.</li>
        <li>The festivals are in list view on the bottom half of the
            page, upon scrolling calendar goes up and festival list is shown in
            full page.</li>
        <li>Use navigation button to change the month. Traverse between
            months to view festivals.</li>
        <li>Menu is customized so that it can meet user expectations and
            this app is user friendly.</li>
    </ul>
</div>

この問題を解決するためのヒントを教えてください

前もって感謝します

4

1 に答える 1

0

Code This is code for navigation では、開始点が欠落している 2 つのタグがあります</label></li>( の直前<li class="menuList" id="home">)。同じ部分に<li class="menuList" id="share">も余分な</a>閉じタグが存在します。

About us ページのコードに、終了</div>タグがありません。

これらの修正でコードを再確認してください。これで問題が解決しない場合は、さらにお手伝いします。

于 2014-12-29T12:55:12.753 に答える