Can't get UI tabs to work
I want to use jQuery's ui tabs in my webpage. Unfortunately, I can't
even get the example to work. I don't know what/where I'm going wrong.
Does anyone have a complete, easy to understand example they could
share? If not below is the code I have, if some could tell me what
needs to be fixed it would be appreciated. Thanks.
HTML code:
<script src="jQuery.js" type="text/javascript"></script>
<script src="ui.core.js" type="text/javascript"></script>
<script src="ui.tabs.js" type="text/javascript"></script>
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">
First tab is active by default:
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</div>
</div>
JS code:
$(document).ready(function(){
$("#example > ul").tabs();
});
CSS code:
.ui-tabs-hide { display: none; }
.tabPanel ul{
padding: 3px 0;
margin-top: 15px;
margin-left: 0;
border-bottom: 1px #999999 solid;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as
desired*/
}
.tabPanel li{
display: inline;
margin: 0;
}
.tabPanel li a{
text-decoration: none;
padding: 3px 7px;
border: 1px #FF6600 solid;
border-bottom: none;
background-color: #FFFFFF;
color: #000000;
}
.tabPanel li a:visited{
color: #2d2b2b;
}
.tabPanel li a:hover{
background-color: #FF6600;
color: #FFFFFF;
cursor: pointer;
font-size: 12pt;
text-decoration: underline;
}
.tabPanel li a:active{
background-color: #FF6600;
color: #FFFFFF;
}
.tabPanel li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}