Jquery Tabs帮助

Question

所以我试图在菜单中制作一个标签但是不能使每个标签219px的整个宽度。它只允许我制作li 219，但我想让它成为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声明。

要防止您的链接溢出列表元素右侧10px，请删除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

您无法为内联元素设置宽度。试试li a {display:inline-block;}

Answer 3

试试这个链接：

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

这非常有用