Steve7423
asked on
JQuery Tabs Display as links
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("~/Scrip ts/jquery- 1.5.1.min. js")" type="text/javascript"></s cript>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../../Scripts/jquery- 1.9.1.min. js" type="text/javascript"></s cript>
<script src="../../Scripts/jquery- ui-1.10.3. custom.js" type="text/javascript"></s cript>
<script src="../../Scripts/jquery- ui-1.10.3. custom.min .js" type="text/javascript"></s cript>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="../../Scripts/jquery .ui.all.cs s" rel="stylesheet" type="text/css" />
<link href="../../Scripts/jquery .ui.tabs.c ss" 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
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("~/Scrip
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="../../Scripts/jquery-
<script src="../../Scripts/jquery-
<script src="../../Scripts/jquery-
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="../../Scripts/jquery
<link href="../../Scripts/jquery
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
I placed this above my JQuery script and it worked ! thanks
<link href="../../Scripts/jquery
<link href="../../Scripts/jquery