Solved

JQuery Tabs Display as links

Posted on 2013-05-22
3
464 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
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…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

856 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