Solved

JQuery Tabs Display as links

Posted on 2013-05-22
3
467 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…
This tutorial will teach you the special effect of super speed similar to the fictional character Wally West aka "The Flash" After Shake : http://www.videocopilot.net/presets/after_shake/ All lightning effects with instructions : http://www.mediaf…

717 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