Menu In Single Page Application

%-- _lcid="1033" _version="15.0.4420" _dal="1" --%>

<%-- _LocalBinding --%>

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

                <SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

<script type="text/javascript" src="../../SiteAssets/Scripts/jquery-1.11.2.min.js"></script>

<style> 

    .navigation { 

        width: 80px; 

        height: 10px; 

        background: burlywood; 

        padding: 14px; 

        margin-bottom: 20px; 

        border: 1px solid white; 

        font-weight: bold; 

        cursor: pointer; 

    } 

  

    div#divNavigation { 

        display: flex; 

    } 

</style> 

                <meta name="GENERATOR" content="Microsoft SharePoint" />

                <meta name="ProgId" content="SharePoint.WebPartPage.Document" />

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <meta name="CollaborationServer" content="SharePoint Team Web Site" />

                <SharePoint:ScriptBlock runat="server">

                var navBarHelpOverrideKey = "WSSEndUser";

                </SharePoint:ScriptBlock>

<SharePoint:StyleBlock runat="server">

body #s4-leftpanel {

                display:none;

}

.s4-ca {

                margin-left:0px;

}

</SharePoint:StyleBlock>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">

                <SharePoint:DelegateControl runat="server"

                                ControlId="SmallSearchInputBox"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">

                <SharePoint:ProjectProperty Property="Description" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

 

<script type="text/javascript"> 

    function hideshow(elmt) { 

        if (elmt == "divtab1") { 

            $("#HomeContent").show(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab2") { 

            $("#HomeContent").hide(); 

            $("#HRContent").show(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab3") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").show(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab4") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").show(); 

            $("#QuestionsContent").hide(); 

        } else if (elmt == "divtab5") { 

            $("#HomeContent").hide(); 

            $("#HRContent").hide(); 

            $("#ITContent").hide(); 

            $("#ContactContent").hide(); 

            $("#QuestionsContent").show(); 

        } 

    } 

</script>

 

<div id="divmain"> 

    <div id="divNavigation"> 

        <div id="divtab1" onclick="hideshow(this.id);" class="navigation"> Home </div> 

        <div id="divtab2" onclick="hideshow(this.id);" class="navigation">HR </div> 

        <div id="divtab3" onclick="hideshow(this.id);" class="navigation">IT </div> 

        <div id="divtab4" onclick="hideshow(this.id);" class="navigation">Contact US </div> 

        <div id="divtab5" onclick="hideshow(this.id);" class="navigation">Questions </div> 

    </div> 

    <div id="divContent"> 

        <div id="HomeContent"> 

            <div> Add ur Content for home page </div> 

        </div> 

        <div id="HRContent" style="display:none"> 

            <div> Add ur Content for HR page </div> 

        </div> 

        <div id="ITContent" style="display:none"> 

            <div> Add ur Content for IT page </div> 

        </div> 

        <div id="ContactContent" style="display:none"> 

            <div> Add ur Content for Contact page </div> 

        </div> 

        <div id="QuestionsContent" style="display:none"> 

            <div> Add ur Content for Questions page </div> 

        </div> 

    </div> 

</div> 

                <div class="ms-hide">

                <WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false" Style="display:none;"><ZoneTemplate>

                <WebPartPages:TitleBarWebPart runat="server" HeaderTitle="Untitled_3" Title="Web Part Page Title Bar" FrameType="None" SuppressWebPartChrome="False" Description="" IsIncluded="True" ZoneID="TitleBar" PartOrder="2" FrameState="Normal" AllowRemove="False" AllowZoneChange="True" AllowMinimize="False" AllowConnect="True" AllowEdit="True" AllowHide="True" IsVisible="True" DetailLink="" HelpLink="" HelpMode="Modeless" Dir="Default" PartImageSmall="" MissingAssembly="Cannot import this Web Part." PartImageLarge="" IsIncludedFilter="" ExportControlledProperties="True" ConnectionID="00000000-0000-0000-0000-000000000000" ID="g_17fd993a_941a_4a6b_af46_082710afe3fd" AllowClose="False" ChromeType="None" ExportMode="All" __MarkupType="vsattributemarkup" __WebPartId="{17FD993A-941A-4A6B-AF46-082710AFE3FD}" WebPart="true" Height="" Width=""></WebPartPages:TitleBarWebPart>

 

                </ZoneTemplate></WebPartPages:WebPartZone>

  </div>

  <table class="ms-core-tableNoSpace ms-webpartPage-root" width="100%">

                                                                <tr>

                                                                                <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" valign="top" width="100%">

                                                                                <WebPartPages:WebPartZone runat="server" Title="loc:FullPage" ID="FullPage" FrameType="TitleBarOnly"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone> </td>

                                                                </tr>

                                                                <SharePoint:ScriptBlock runat="server">if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function") {MSOLayout_MakeInvisibleIfEmpty();}</SharePoint:ScriptBlock>

                                </table>

</asp:Content>