Jquery 选项卡帮助

Question

所以我想在菜单中制作一个选项卡，但无法使每个选项卡的整个宽度为 219 像素。它只允许我将 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>       

查询

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

anchor 的宽度

anchor 默认显示为 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>

然后您可以轻松地将处理程序绑定(bind)到每个的 click 事件，以找到与要显示的新选项卡对应的链接，然后触发 its 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;
});