creating tabs using jquery

Question

I'm trying to create tabs on my Content Page, but it does not work for me. I've added the scripts to the Master Page

<script src="Scripts/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.2.0.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>

and then trying to add tabs on the Content Page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="AddMember.aspx.cs" Inherits="EOSProject.AddMember" %>

<asp:Content ID="Content1" runat="server" contentplaceholderid="MainContent">        
    <script type="text/javascript">
            $(document).ready(function () {
                $(" #tabs ").tabs();
            });
        </script>
        <div id="tabs">
            <ul>
                <li> <a href="#tabs-1"> First Tab </a> </li>
                <li> <a href="#tabs-2"> Second Tab </a> </li>
                <li> <a href="#tabs-3"> Third Tab </a> </li>
            </ul>
              <div id="tabs-1">
                  Tab1
              </div>
            <div id="tabs-2">
                Tab2
            </div>
            <div id="tabs-3">
                Tab3
            </div>
        </div>
</asp:Content>

is there something missing ?

Thanks in Advance :)

@MarkC.No error, it is just not working and no tabs created. — Omarkk
– Omarkk, Commented Jan 20, 2016 at 16:44
throw an alert("hi"); in there to see if jquery is even working. Are you checking the actual console window not the page? — JonH
– JonH, Commented Jan 20, 2016 at 16:45
Why are you loading jQuery library twice? jquery-2.2.0.min.js and jquery-2.2.0.js are the same thing. — Victor Levin
– Victor Levin, Commented Jan 20, 2016 at 16:48
alert is working and it shows the message box, I'm checking the page and the console window, there is no error there. — Omarkk
– Omarkk, Commented Jan 20, 2016 at 16:49

Mark C. · Accepted Answer · 2016-01-20 16:48:06Z

1

Well, I don't know what it looks like on your screen, but if I add jQuery, jQuery UI JS, and jQuery UI CSS, everything works.

Here's a Fiddle.

I would make sure you're referencing your scripts correctly, and are also including the CSS file for good measure..

As a quick test, you can include these references and see if the tabs show up:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

answered Jan 20, 2016 at 16:48

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

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

1 Comment

Omarkk Over a year ago

that was the missing references and it is working now :) Thanks a lot Mark :)

Collectives™ on Stack Overflow

creating tabs using jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related