javascript - 获取事件类的前 li

Question

我有以下html

<ul>
   <li>Home</li>
   <li class="active">About</li>
   <li>Contact</li>
</ul>

我只想在下一个 li 类处于事件状态时覆盖 li 的某些 css 属性。

我的CSS是

ul li{
color:#eee
}

ul li.active{
color:#000;
}

所以我想给那个 li 添加一个边框，它的下一个 li 类是事件的。所以在这种情况下，我想给 home 添加一个边框。它不能一直都一样，就好像为 active 类设置了一样联系然后我想为我们添加边框。

我不确定这是否可以使用 css 或 javascript 来完成。

我们非常欢迎任何建议/提示。提前致谢。

Answer 1

您可以使用 JavaScript 执行此操作:

Fiddle

// get all li elements
var li = document.getElementsByTagName('li');

// loop through all li elements
for (i = 0; i < li.length; i++) {

    // if the first element's class list contains 'active'
    if (i == 0 && li[i].classList.contains('active')) {
        // change css properties of the last element
        li[li.length - 1].style.borderWidth = '1px';
        li[li.length - 1].style.borderColor = 'red';
        li[li.length - 1].style.borderStyle = 'solid';
    }

    // check if next li element's class list contains 'active'
    if (li[i + 1].classList.contains('active')) {
        // add border to the current li element
        li[i].style.borderWidth = '1px';
        li[i].style.borderColor = 'red';
        li[i].style.borderStyle = 'solid';
    }
}

当第一个li元素有active类时-----> Fiddle