Solved

JQuery Tabs Display as links

Posted on 2013-05-22
3
462 Views
Last Modified: 2013-05-27
I've downloaded the JQuery 1.10.3.custom.js from the Jquery site.  I've followed examples and I can't seem to get the tab to display as a tab.  Instead it shows as independant links, see attached.

I'm new to Jquery and just learning.  I have no idea what I'm missing of what might be causing the problem.  

Q) are the different Jquery versions; 1.5 and 1.10 and 1.9 conflicting with each other?
     I'm using IE 7


Here's the code:

_Layout.cshtml:

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
      <script src="../../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
      <script src="../../Scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
      <link href="../../Scripts/jquery.ui.all.css" rel="stylesheet" type="text/css" />
      <link href="../../Scripts/jquery.ui.tabs.css" rel="stylesheet" type="text/css" />


The View:


 <script type="text/javascript" language="javascript">
     $(document).ready(function () {
         $("#tabs").tabs();
     });
      </script>


<div id="tabs">  
        <ul>    
            <li><a href="#tabs-1">Tab 1</a></li>    
            <li><a href="#tabs-2">Tab 2</a></li>    
            <li><a href="#tabs-3">Tab 3</a></li>  
            </ul>  
                <div id="tabs-1">    
                    <p>Some text for tab 1.</p>  
                </div>  <div id="tabs-2">    
                    <p>Some text for tab 2.</p>  
                </div>  <div id="tabs-3">    
                    <p>Some text for tab 3.</p>  
                </div>
       </div>
Tab-Display-Problem.bmp
Tab-Test-Project-references.bmp
0
Comment
Question by:Steve7423
3 Comments
 
LVL 29

Accepted Solution

by:
Kumaraswamy R earned 250 total points
ID: 39190276
hi

try

<link rel="stylesheet" type="text/css" href="url" />

http://jsfiddle.net/6kg7k/
0
 
LVL 12

Assisted Solution

by:jagssidurala
jagssidurala earned 250 total points
ID: 39193288
Call Css links before JS files calling ......

Try  this let me know ....
0
 

Author Comment

by:Steve7423
ID: 39199368
rkworlds:

I placed this above my JQuery script and it worked !  thanks

<link href="../../Scripts/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question