「Jquery製表符」 - 在Asp.net mvc中的導航菜單樣式？

我剛開始使用jQuery選項卡，它看起來不錯。我想用它們作爲我的導航菜單ASP.NET MVC。我清理了site.css，並在我的_Layout.cshtml中寫下了以下代碼。我可以看到菜單，但它不能正常工作，因爲我想要的。無論我選擇哪個鏈接（它也會顯示預期的頁面，但是在主頁的內容下面），它每次都會加載主頁。「Jquery製表符」 - 在Asp.net mvc中的導航菜單樣式？

<!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/themes/base/css") 
     @Styles.Render("~/Content/bootstrap") 
     @Styles.Render("~/Content/css") 
     @Scripts.Render("~/bundles/modernizr") 
     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/jqueryui") 
     @Scripts.Render("~/bundles/bootstrap") 

<script> 
      $(function() { 
       $("#tabs").tabs({ active: false }); 
      }); 
     </script> 


     </head> 
     <body> 
      <header> 
       <div > 
        <div > 
         <p >@Html.ActionLink("your logo here", "Index", "Home")</p> 
        </div> 
        <div > 
         <section> 
          Hello, <span >@User.Identity.Name</span>! 
         </section> 
         <nav> 
         <div id = "tabs"> 
          <ul > 
           <li>@Html.ActionLink("Home", "Index", "Home")</li> 
           <li>@Html.ActionLink("About", "About", "Home")</li> 
           <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
          </ul> 
         </div> 
         </nav> 
        </div> 
       </div> 
      </header> 
      <div > 
       @RenderSection("featured", required: false) 
       <section class="content-wrapper main-content clear-fix"> 
        @RenderBody() 
       </section> 
      </div> 
      <footer> 
       <div > 
        <div > 
         <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p> 
        </div> 
       </div> 
      </footer> 

      @RenderSection("scripts", required: false) 
     </body> 
    </html>

來源

2013-02-14 Ren

你可以發佈你的整個'_Layout.cshtml'嗎？ – rae1 2013-02-14 13:41:42

你爲什麼把腳本放在你的DOM之外？ – 2013-02-14 17:37:40

我已根據要求發佈了整個_Layout.cshtml。就像我所說的，site.css中沒有任何內容。試圖用jquery選項卡創建一個導航菜單。 – Ren 2013-02-14 17:39:37

你似乎已經宣佈jQuery兩次（一次在開始和一次在結束），這顯然是錯誤的。嘗試修復腳本：

<!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/themes/base/css") 
     @Styles.Render("~/Content/bootstrap") 
     @Styles.Render("~/Content/css") 
    </head> 
    <body> 
     <header> 
      <div> 
       <div> 
        <p>@Html.ActionLink("your logo here", "Index", "Home")</p> 
       </div> 
       <div> 
        <section> 
         Hello, <span >@User.Identity.Name</span>! 
        </section> 
        <nav> 
        <div id="tabs"> 
         <ul> 
          <li>@Html.ActionLink("Home", "Index", "Home")</li> 
          <li>@Html.ActionLink("About", "About", "Home")</li> 
          <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
         </ul> 
        </div> 
        </nav> 
       </div> 
      </div> 
     </header> 
     <div> 
      @RenderSection("featured", required: false) 
      <section class="content-wrapper main-content clear-fix"> 
       @RenderBody() 
      </section> 
     </div> 
     <footer> 
      <div> 
       <div> 
        <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p> 
       </div> 
      </div> 
     </footer> 

     @Scripts.Render("~/bundles/jquery") 
     @Scripts.Render("~/bundles/jqueryui") 
     @Scripts.Render("~/bundles/bootstrap") 
     @RenderSection("scripts", required: false) 
     @Scripts.Render("~/bundles/modernizr") 
     <script> 
      $("#tabs").tabs({ active: false }); 
     </script> 
    </body> 
</html>

來源

2013-02-14 17:43:41

我同意腳本移動到底部，但'modernizr'應該保留在CSS之後的頭部。 – MikeSmithDev 2013-02-14 19:43:50

@ user1980311是的，添加這樣的腳本（在''標籤之前）是慣例，而頁面加速是最好的方式。 – MikeSmithDev 2013-02-14 19:46:30

「Jquery製表符」 - 在Asp.net mvc中的導航菜單樣式？

回答

相關問題