?
Solved

JQuery Tabs Display as links

Posted on 2013-05-22
3
Medium Priority
?
468 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 750 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 750 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

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

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

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
In this video you will find out how to export Office 365 mailboxes using the built in eDiscovery tool. Bear in mind that although this method might be useful in some cases, using PST files as Office 365 backup is troublesome in a long run (more on t…
Sometimes it takes a new vantage point, apart from our everyday security practices, to truly see our Active Directory (AD) vulnerabilities. We get used to implementing the same techniques and checking the same areas for a breach. This pattern can re…
Suggested Courses
Course of the Month10 days, 15 hours left to enroll

770 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