为nav-tab应用顶部边框的最佳方法

Question

我的asp.net mvc razor视图中有以下内容： -

<ul class="nav nav-tabs" id="myTab">
<li >
//code goes here..
</li>

要更改当前选中的标签，我写了以下javascript： -

$(document).ready(function () {

    $('ul.nav li').click(function () {
        // Remove previous clicked tab class

        $('ul.nav li').removeClass('active selecteTabBoarder');
        // Add class to the tab that triggered the click event

        $(this).addClass('active selecteTabBoarder');
    });
});

.selecteTabBoareder是： -

.selecteTabBoarder {

border-top: 2px  solid #4ba6db;
border-top-left-radius: 4px;

border-top-right-radius: 4px;
}

目前，寄宿生的布局看起来像左边和左边一样。右侧将位于选项卡寄存器之外（我做了缩放）： -

那么有人可以就此提出建议吗？ 感谢

Answer 1

尝试在元素上使用box-sizing: border-box。这大多数时候都解决了这种事情。我假设每次你点击其中一个<li>元素时，你想要在那个元素上切换你的类，并将它从所有兄弟姐妹中删除，所以我鼓励你尝试使用jQuery＆＃39; s {{ 1}}而不是。我会说，它更优雅。

这是您working pen的情况。我把你的代码抽搐了一下，但你可以得到要点！我希望它有所帮助。 =）

编辑：确保这是唯一适用于您的HTML的HTML总是一个好主意。也许有些东西会覆盖你的规则并造成这种奇怪的行为。