"Jquery Tabs" - navigation menu styling in Asp.net mvc?

Question

I've just started using jQuery tabs, and it looks great. I would like to use them as my navigation menu in ASP.NET MVC. I cleaned up the site.css and have written the below code in my _Layout.cshtml. I can see the menu but it is not working correctly as i wanted. It loads the homepage every time no matter which link I select (it also displays the intended page, but below the contents of the home page).

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

I've posted the entire _Layout.cshtml as requested. Like I've said, There is nothing there in the site.css. Just trying to create a navigation menu using jquery tabs. — Ren
– Ren, Commented Feb 14, 2013 at 17:39
Have put the scripts back in the DOM, still same result. Like i've mentioned, I can see the tabs just as I want it to look like, but it's not working correctly as I intended. Thanks — Ren
– Ren, Commented Feb 14, 2013 at 17:42

Darin Dimitrov · Accepted Answer · 2013-02-14 17:43:41Z

1

You seem to have declared jquery twice (once at the beginning and once at the end) which obviously is wrong. Try fixing your scripts:

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

answered Feb 14, 2013 at 17:43

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MikeSmithDev Over a year ago

I agree that the scripts be moved to bottom, but modernizr should remain in the head, after the CSS.

MikeSmithDev Over a year ago

@user1980311 Yes, adding the scripts like that (before the </body> tag) is common practice, and page speed-wise is the best way to do it.

Collectives™ on Stack Overflow

"Jquery Tabs" - navigation menu styling in Asp.net mvc?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related