我有一个有5个li的ul，两边各有两个li，然后我要做下面的操作

I have a ul with 5 li i and two other li in both side pre and next i wanna do as below

本文关键字：li 两个 我要 然后 操作 5个 有一个 ul      更新时间：2023-09-26

点击预显示前三个里，点击下一步显示最后三个里与mootools和漂亮的动画。有人能帮帮我吗?

<ul class="test">
<li><a href='' class="prev">pre</a></li>
<li class="test1">test1</li>
<li class="test2">test2</li>
<li class="test3">test3</li>
<li class="test4">test4</li>
<li class="test5">test5</li>
<li><a>next</a></li>
</ul>
http://jsfiddle.net/vtoedop7/17/

这是我用一个简单的淡出动画制作的JSFiddle。javascript代码找到未标记为活动的元素并激活它们。这对于只有2页的小列表来说已经足够了。它需要调整工作与更多的页面，但我不确定从你的规格，如果这是你想要的。https://jsfiddle.net/aj7x38th/


html:<ul class="tests">
    <li><a onclick="change()" class="prev">pre</a></li>
    <li class="test active">test1</li>
    <li class="test active">test2</li>
    <li class="test active">test3</li>
    <li class="test">test4</li>
    <li class="test">test5</li>
    <li class="test">test6</li>
    <li><a onclick="change()" class='next'>next</a></li>
</ul>
Javascript: 

function change() {
    var tests = document.getElementsByClassName('test');
    var numberOfTestsActive = 0;
    [].forEach.call(tests, function(currentTest) {
        if(currentTest.classList.contains('active')) {
            currentTest.classList.remove('active');
        } else {
            currentTest.classList.add('active');
        }
    });
}
CSS: 

.tests li {
    float:left;
    padding-right:20px;
    list-style: none;
}
.test {
    display: none;
}
.active {
    display: inline;
    animation: test-fade-in 1s forwards;
}
.next, .prev {
    text-decoration: underline;
    color: purple;
    cursor: pointer;
}
@keyframes test-fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}
相关文章：