如何使用项目符号和箭头添加/删除类

Question

我无法确定当用户单击其相应编号或prev/next箭头时如何添加和删除类中的类。

请注意第二项以及第二项导航上的'active'类。当用户点击“1”或“上一个”箭头时，我希望该课程被移除并添加到第一个项目和导航栏中。

.wrap { 
 
    display: block; 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 

 
.nav { 
 
    margin-bottom: 10px; 
 
} 
 
.nav a { 
 
    padding: 5px; 
 
} 
 
.nav a:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 
.nav a.active { 
 
    border-bottom: 1px solid black; 
 
    font-weight: 900; 
 
} 
 

 
.prev, .next { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
.prev:hover, .next:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 

 
.items div { 
 
    display: none; 
 
    padding: 25px; 
 
} 
 
.items .one { 
 
    background: red; 
 
} 
 
.items .two { 
 
    background: green; 
 
} 
 
.items .three { 
 
    background: blue; 
 
} 
 
.items .active { 
 
    display: inline-block; 
 
}

<div class="wrap"> 
 
    <div class="nav"> 
 
    <a class="one">1</a> 
 
    <a class="two active">2</a> 
 
    <a class="three">3 </a> 
 
    </div> 
 
    <div class="items"> 
 
    <span class="prev"><</span> 
 
    <div class="one">ONE</div> 
 
    <div class="two active">TWO</div> 
 
    <div class="three">THREE</div> 
 
    <span class="next">></span> 
 
    </div> 
 
</div>

http://codepen.io/bbbenji/pen/WovJEM

Answer 1

你可以试试这个somethinglike：

$('.next, .prev').on('click', function() { 
 
    var $cur = $(this).closest('.wrap').find('.items div.active'); 
 
    var $nav = $(this).closest('.wrap').find(' .nav a.active') 
 

 
    if ($(this).hasClass('next')) { 
 
    if ($cur.next('div').length === 0) return 
 
    $cur.next('div').addClass('active'); 
 
    $nav.next('a').addClass('active'); 
 
    } else { 
 
    if ($cur.prev('div').length === 0) return 
 
    $cur.prev('div').addClass('active'); 
 
    $nav.prev('a').addClass('active'); 
 
    } 
 
    $cur.removeClass('active') 
 
    $nav.removeClass('active') 
 
}) 
 

 
$('.nav a').on('click', function() { 
 
    var index = $(this).index(); 
 
    $(this).closest('.wrap').find('.items div').removeClass('active').eq(index).addClass('active') 
 
    $(this).closest('.wrap').find('.nav a').removeClass('active').eq(index).addClass('active') 
 
})

.wrap { 
 
    display: block; 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 
.nav { 
 
    margin-bottom: 10px; 
 
} 
 
.nav a { 
 
    padding: 5px; 
 
} 
 
.nav a:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 
.nav a.active { 
 
    border-bottom: 1px solid black; 
 
    font-weight: 900; 
 
} 
 
.prev, 
 
.next { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
.prev:hover, 
 
.next:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 
.items div { 
 
    display: none; 
 
    padding: 25px; 
 
} 
 
.items .one { 
 
    background: red; 
 
} 
 
.items .two { 
 
    background: green; 
 
} 
 
.items .three { 
 
    background: blue; 
 
} 
 
.items .active { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="nav"> 
 
    <a class="one">1</a> 
 
    <a class="two active">2</a> 
 
    <a class="three">3 </a> 
 
    </div> 
 
    <div class="items"> 
 
    <span class="prev"><</span> 
 
    <div class="one">ONE</div> 
 
    <div class="two active">TWO</div> 
 
    <div class="three">THREE</div> 
 
    <span class="next">></span> 
 
    </div> 
 
</div> 
 

 
<div class="wrap"> 
 
    <div class="nav"> 
 
    <a class="one">1</a> 
 
    <a class="two active">2</a> 
 
    <a class="three">3 </a> 
 
    </div> 
 
    <div class="items"> 
 
    <span class="prev"><</span> 
 
    <div class="one">ONE</div> 
 
    <div class="two active">TWO</div> 
 
    <div class="three">THREE</div> 
 
    <span class="next">></span> 
 
    </div> 
 
</div>

Answer 2

这里是anothe使用对数的index

var classes = ["one", "two", "three"]; 
 
var currentIndex = 1; 
 

 
$('.next, .prev').on('click', function() { 
 
    if ($(this).hasClass('next')) { 
 
    if (currentIndex === classes.length - 1) return; 
 
    removeAndAddActive(currentIndex, ++currentIndex); 
 
    } else { 
 
    if (currentIndex === 0) return; 
 
    removeAndAddActive(currentIndex, --currentIndex); 
 
    } 
 
}) 
 

 
$('.nav a').on('click', function() { 
 
    let index = $(this).index(); 
 
    removeAndAddActive(currentIndex, index); 
 
    currentIndex = index; 
 
}) 
 

 
function removeAndAddActive(removeIndex, addIndex) { 
 
    $('.' + classes[removeIndex]).removeClass('active'); 
 
    $('.' + classes[addIndex]).addClass('active'); 
 
}

.wrap { 
 
    display: block; 
 
    width: 200px; 
 
    margin: 50px auto; 
 
    text-align: center; 
 
} 
 
.nav { 
 
    margin-bottom: 10px; 
 
} 
 
.nav a { 
 
    padding: 5px; 
 
} 
 
.nav a:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 
.nav a.active { 
 
    border-bottom: 1px solid black; 
 
    font-weight: 900; 
 
} 
 
.prev, 
 
.next { 
 
    display: inline-block; 
 
    padding: 5px; 
 
} 
 
.prev:hover, 
 
.next:hover { 
 
    font-weight: 900; 
 
    cursor: pointer; 
 
} 
 
.items div { 
 
    display: none; 
 
    padding: 25px; 
 
} 
 
.items .one { 
 
    background: red; 
 
} 
 
.items .two { 
 
    background: green; 
 
} 
 
.items .three { 
 
    background: blue; 
 
} 
 
.items .active { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="wrap"> 
 
    <div class="nav"> 
 
    <a class="one">1</a> 
 
    <a class="two active">2</a> 
 
    <a class="three">3 </a> 
 
    </div> 
 
    <div class="items"> 
 
    <span class="prev"><</span> 
 
    <div class="one">ONE</div> 
 
    <div class="two active">TWO</div> 
 
    <div class="three">THREE</div> 
 
    <span class="next">></span> 
 
    </div> 
 
</div>