Hinzufügen/Entfernen von Klassen mithilfe von Aufzählungszeichen und Pfeilen

Question

Ich habe Probleme herauszufinden, wie Sie eine Klasse aus einem Div hinzufügen und entfernen, wenn ein Benutzer entweder auf die entsprechende Nummer oder die vorherigen/nächsten Pfeile klickt.

Beachten Sie die 'aktive' Klasse auf dem zweiten Element sowie das zweite nav. Ich möchte, dass die Klasse entfernt und dem ersten Element und dem Navigationselement hinzugefügt wird, wenn ein Benutzer auf den Pfeil "1" oder den "vorherigen" klickt.

.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

können Sie somethinglike dies versuchen:

$('.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

Hier anothe r Art und Weise tun ein 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>