Jquery Tabs Help

Question

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();

Answer 1

You cannot set a width to inline elements. Try li a {display:inline-block;}

Answer 2

Width of Anchor

Anchors are by default displayed as inline elements. An inline element will only be given the minimum amount of height and width necessary to display its contents.

You could declare that they should be displayed as block elements. This way, the browser will honor the width declaration you have provided.

To then prevent your links from overflowing out the right of your list elements by 10px, remove the width specification for the li.

.servicesNavigation li {
    float: left;
    list-style: none;
    /* width: 219px; */ <-- Remove this declaration
}

ul.servicesNavigation li a {
    display: block; <-- Add this declaration
    padding: 3px 5px;
    background-color: #ccc;
    color: #000;
    text-decoration: none;
    width: 219px;
}

Next/Previous

I would suggest adding the following tags somewhere outside of your list, styled any way you'd like:

<a id="previous" href="#previous">previous</a>
<a id="next" href="#next">next</a>

Then you can easily bind a handler to the click event of each to find the link corresponding with the new tab to display and in turn trigger its click event.

$('#next').click(function() {
   var selectedLink = 
      $('div.servicesInfo ul.servicesNavigation a.selected').first();
   selectedLink.parent().next().children().click();
   return false;
});

$('#previous').click(function() {
   var selectedLink = 
      $('div.servicesInfo ul.servicesNavigation a.selected').first();
   selectedLink.parent().prev().children().click();
   return false;
});

Answer 3

try this link:

http://addyosmani.com/blog/fluid-navigation-how-to-create-an-informative-menu-bar-with-jquery-in-just-a-few-minutes/#myPosts

this is very useful