jquery - クラスを次の要素に追加/削除する最良の方法は?

Question

HTML

 <div class="item active" data-category="sharks">
 <div class="item" data-category="tigers">
 <div class="item" data-category="lions">

 <a href="#" class="btn btn-primary" id="next-button" rel="nofollow">Next</a>

$("#next-button").click(".item:not(.active)", function (event) {
    $(".item.active", event.delegateTarget).removeClass("active");
    $(this).next().addClass("active");
});

フィドル

active次のクラスに追加して、前の.itemクラスから削除しようとし.itemています..簡単です。

また、もう 1 つ.active、特定のデータ ID をクリックして一致するデータ カテゴリに追加する方法を教えてください。

基本的に.item、次のボタンから1つにアクティブを追加する2つの方法と、フィドルに表示されるナビゲーションのようなものからも追加する方法