Search code examples
jqueryasp.netmaster-pagesjquery-tabs

jQuery Tabs on ASP.Net Master Page

I've gone through every example online, but I cannot find the answer for such a simple thing. What I've done: Create a new asp.net project In master page, add links to jQuery:

<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>

Add new page (with masterpage):

  <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestJSTab_MasterPage.Content.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
      <script>
          $(function () {
              $("#tabs").tabs();
          })
      </script>
    <div id="tabs" >
        <ul>
            <li><a href="#fragment-1"><span>One</span></a></li>
            <li><a href="#fragment-2"><span>Two</span></a></li>
        </ul>
        <div id="fragment-1">
            <p>First tab is active by default:</p>
        </div>
        <div id="fragment-2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </div>
</asp:Content>
  1. jQuery is loaded successfully on the page. I can use jQuery functions on the page.
  2. the controls are client side and are not renamed because of the master page .Resulting webpage
  3. the tabs simply dont work.

Please help

Solution

  • it looks like you're missing the style sheet?

    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    Also, check the console to see if you have any errors, I suspect the referencing (//code...) is OK?