Member Avatar for sam1

I am using jquery tabs in master page to open the aspx files once user clicks on a tab heading. But if I use my page as link it will repeat the "header" part(similar to this:http://stackoverflow.com/questions/9459991/jquery-tabs-and-asp-net-master-pages-issue). Already tried the solution but cannot get my head around it. Can someone please help. here is my code in masterpage:

<form id="form1" runat="server">
<div class="mainWrapper">
    <div class="wrapper">
        <div class="header">
            <a href="" class="logo"></a>
            <div class="topToolbar">
                <span>Welcome <a href="/" class="logOut">Log Out</a></span>
            </div>
        </div>
        <div class="container">
            <div id="tabs">
                <div class="tabsCenter">
                    <ul>
                        <li><a href="Myfirstpage.aspx">First</a></li>
                        <li><a href="SecondPage.aspx">Second</a></li>
                    </ul>

                </div>

                <div class="tabsBottom">
                </div>
            </div>
           <asp:ContentPlaceHolder ID="BodyContent" runat="server">
            </asp:ContentPlaceHolder>

        </div>
    </div>
    <div class="push">
    </div>
</div>
</form>
  • 2 Contributors
  • 1 Reply
  • 584 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by JorgeM
Member Avatar for JorgeM

Hello, copied your code and did the following:

1) I downloaded the required files from the jQuery UI site: http://jqueryui.com/demos/tabs/

2) created a Master page, then a new page based on the master.

3) I added the required Div elements that were missing from your code.

Herer is a working sample i just validated.

<%@ Master Language="VB" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
<asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder>
<link href="css/smoothness/jquery-ui-1.8.24.custom.css" rel="Stylesheet" />  
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.24.custom.min.js"></script>
<script>
    $(function () {
        $("#tabs").tabs();
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="mainWrapper">
    <div class="wrapper">
        <div class="header">
            <a href="" class="logo"></a>
            <div class="topToolbar">
                <span>Welcome <a href="/" class="logOut">Log Out</a></span>
            </div>
        </div>
        <div class="container">
            <div id="tabs">
                <div class="tabsCenter">
                    <ul>
                        <li><a href="#tabs-1">First</a></li>
                        <li><a href="#tabs-2">Second</a></li>
                    </ul>
                    <div id="tabs-1">
                        <p>Some content in tab-1.</p>
                    </div>
                    <div id="tabs-2">
                        <p>Some content in tab-2.</p>
                    </div>
                </div>
                <div class="tabsBottom"></div>
            </div>
           <asp:ContentPlaceHolder ID="BodyContent" runat="server"></asp:ContentPlaceHolder>
        </div>
    </div>
    <div class="push"></div>
</div>
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.