1

我是 MVC 的新手.....

我对单页应用程序有一些问题....

通过使用...我想制作这种网页... http://www.irealities.com/#team

  1. 我尝试过的描述... ========================================= ============================================
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
    </head>

             @**************SCRIPT CODE TO MAKE APPLICATION ONE SCROLL *************@

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".contactLink").click(function () {
            if ($("#contactForm").is(":hidden")) {
                $("#contactForm").slideDown("slow");
            }
            else {
                $("#contactForm").slideUp("slow");
            }
        });
    });
    function closeForm() {
        $("#messageSent").show("slow");
        setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
    }

    $(document).ready(function () {
        function filterPath(string) {
            return string
              .replace(/^\//, '')
              .replace(/(index|default).[a-zA-Z]{3,4}$/, '')
              .replace(/\/$/, '');
        }
        $('a[href*=#]').each(function () {
            if (filterPath(location.pathname) == filterPath(this.pathname)
            && location.hostname == this.hostname
            && this.hash.replace(/#/, '')) {
                var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) + ']');
                var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
                if ($target) {
                    var targetOffset = $target.offset().top;
                    $(this).click(function () {
                        $('html, body').animate({ scrollTop: targetOffset }, 1000);
                        var d = document.createElement("div");
                        //d.style.height = "101%";
                        d.style.overflow = "hidden";
                        document.body.appendChild(d);
                        window.scrollTo(0, scrollToM);
                        setTimeout(function () {
                            d.parentNode.removeChild(d);
                        }, 10);
                        return false;
                    });
                }
            }
        });
    });
    </script>
    <body>
      <section id="main">
         @RenderBody()
     </section>


 <div id="header">
  <table>
   <tr>
     <td><img src="Midasnext.png" alt="Midasnext LOGO" width="400" height="110">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
     <td><div id="nav">        
        <a href="#HOME" class="Circle">HOME</a>
        <a href="#ABOUT" class="Circle">ABOUT</a>
        <a href="#SERVICES" class="Circle">SERVICES</a>
        <a href="#CLIENTS" class="Circle">CLIENTS</a>
        <a href="#CONTACT" class="Circle">CONTACT</a></div>
     </td>
   </tr>
  </table>
 </div>


<div id="page-wrap">

    <div id="page1">

        <a name="HOME"></a>
        <div class="page-padding"></div>
        @*@RenderPage("~/Views/Clients/Index.cshtml")*@
         @*<% Html.RenderPartial("~/Views/Clients/Index.cshtml"); %>*@
        <p>This is what you see on the HOME page.</p>
    </div> <!--END page1-->

    <div id="page2">
        <a name="ABOUT"></a>
        <div class="page-padding"></div>
        <p>This is what you would see on the ABOUT page.</p>
    </div> <!--END page2-->

    <div id="page3">
        <a name="SERVICES"></a> 
        <div class="page-padding"></div>
        @*@RenderPage("~/Views/Home/Contact.cshtml")*@
        <p>This is what you see on the SERVICES page.</p>
    </div> <!--END page3-->

    <div id="page4">
        <a name="CLIENTS"></a>
        <div class="page-padding"></div>
        <p>This is what you would see on the CLIENTS page.</p>
    </div> <!--END page2-->

    <div id="page5">
        <a name="CONTACT"></a> 
        <div class="page-padding"></div>
         @*@RenderPage("~/Views/Home/Contact.cshtml")*@
        <p>This is what you see on the Contact page.</p>
    </div> <!--END page3-->


</div> <!--END page-wrap-->
    </body>

</html>

==================================================== ========================================

2.错误：-

假设我点击了客户端菜单项，然后它会在客户端页面以及页面末尾显示客户端的内容。

我很困惑，该怎么做，怎么做？？？请 frnd 建议我仅在 MVC 中的任何解决方案......

4

0 回答 0