获取以前的活跃课程

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添加一个边框。它不能像活动类一样设置为联系然后我想为我们添加一个边框。

我不确定这是否可以使用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类时-----＆gt; Fiddle

Answer 2

你不能用css做，你必须使用JavaScript或jQuery。

使用jQuery你可以这样做：

$("li.active").prev().addClass("prev");
$("li").on("click", function(){
   $("li").removeClass("active").prev().removeClass("prev");
   $(this).addClass("active").prev().addClass("prev");
});

jsFiddle