Jquery Tabs Help
- by Jacinto
So I am trying to make a tabs in a menu but cant make the whole width of each of the tabs 219px. it only allows me to make the li 219 but I wanna make the li a 219px. I cant seem to figure it out. Also is there a way to make a next button or would the best way to go to each tab and literally put in the next tab in a type of way?
any help would be greatly appreciated
Css
.servicesNavigation li {
float: left;
list-style: none;
width: 219px;
}
ul.servicesNavigation li a {
padding: 3px 5px;
background-color: #ccc;
color: #000;
text-decoration: none;
width: 219px;
}
ul.servicesNavigation li a.selected, ul.tabNavigation li a:hover {
background-color: #333;
color: #fff;
padding-top: 7px;
}
ul.servicesNavigation li a:focus {
outline: 0;
}
HTML
<ul class="servicesNavigation">
<li><a href="#Web">Web</a></li>
<li><a href="#Print">Print</a></li>
<li><a href="#DynamicContent">Dynamic Content</a></li>
<li><a href="#Hosting">Hosting</a></li>
</ul>
Jquery
var tabContainers = $('div.servicesInfo > div');
tabContainers.hide().filter(':first').show();
$('div.servicesInfo ul.servicesNavigation a').click(function () {
tabContainers.hide();
tabContainers.filter(this.hash).show();
$('div.servicesInfo ul.servicesNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
