Справка по Jquery Tabs

Question

Итак, я пытаюсь сделать вкладки в меню, но не могу сделать ширину каждой из вкладок 219px.это только позволяет мне сделать li 219, но я хочу сделать li 219px.Я не могу понять это.Также есть ли способ сделать следующую кнопку или будет лучший способ перейти на каждую вкладку и буквально поместить в следующую вкладку в виде пути?

любая помощь будет принята с благодарностью

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

Ширина якоря

Якоря по умолчанию отображаются как inline элементы. Элемент inline будет иметь только минимальное количество высоты и ширины, необходимое для отображения его содержимого.

Вы можете объявить, что они должны отображаться как block элементы. Таким образом, браузер будет выполнять предоставленную вами декларацию width.

Чтобы предотвратить переполнение ссылок справа от элементов списка на 10 пикселей, удалите спецификацию ширины для 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;
}

Следующий / Предыдущий

Я бы предложил добавить следующие теги где-нибудь за пределами вашего списка, стилизованные так, как вам бы хотелось:

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

Затем вы можете легко привязать обработчик к событию click каждого, чтобы найти ссылку, соответствующую новой вкладке, для отображения и, в свою очередь, вызвать его click событие.

$('#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 2

попробуйте эту ссылку:

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

это очень полезно

Answer 3

Вы не можете установить ширину для встроенных элементов. Попробуйте li a {display:inline-block;}