Jquery 选项卡帮助

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

锚点的宽度

默认情况下，锚点显示为内联元素。内联元素只会被赋予显示其内容所需的最小高度和宽度。

您可以声明它们应显示为 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

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