Jquery prev/next navigation mit show/hide Inhalt für benutzerdefinierten Kalender

Question

Ich möchte einige prev/next Kalenderlösung durch Anzeigen/Verbergen von Inhalt erstellen.

<div class="months"> 
    <div class="082016">2016 august</div> 
    <div class="092016">2016 september</div> 
    <div class="102016">2016 october</div> 
</div> 

und Artikel:

<div class="items"> 
    <div id="082016"> 
     <div class="item">August item</div> 
     <div class="item">August item</div> 
     <div class="item">August item</div> 
    </div> 
    <div id="092016"> 
     <div class="item">September item</div> 
     <div class="item">September item</div> 
     <div class="item">September item</div> 
    </div> 
    <div id="102016"> 
     <div class="item">October item</div> 
     <div class="item">October item</div> 
     <div class="item">October item</div> 
    </div> 
</div> 

Was ich erreichen will ist mit einer solchen Navigation:

ich diesen Code für die Navigation haben (sollten, indem mehr Monate flexibel sein)

So auf den Pfeil klicken, um es diesen Monat id zeigen würde und Titel der Navigation ändern. Auch sollte ich keinen hinteren Pfeil für den ersten Monat und keinen nächsten Pfeil für den Lats-Monat haben.

Vielen Dank im Voraus für jede Hilfe!

Answer 1

für Ihre Frage Mein Vorschlag ist ein reines jQuery Skript:

$(function() { 
 
    var cachedToDivs = $('.months div'); 
 

 
    cachedToDivs.css({'font-weight': 'bold'}); 
 
    $('.items > div:lt(' + (cachedToDivs.length - 1) + ')').hide(); 
 
    $('.months div:lt(' + (cachedToDivs.length - 1) + ')').hide(); 
 

 

 
    cachedToDivs.on('click', 'img', function (e) { 
 
    if ($(':animated').length > 0) { 
 
     return; // wait for last animation... 
 
    } 
 
    var index; 
 
    if (e.target.name == 'prev') { 
 
     index = (-1 + $(this).parent().index()) % cachedToDivs.length; 
 
     index = (index < 0) ? cachedToDivs.length - 1: index; 
 
    } else { 
 
     index = (1 + $(this).parent().index()) % cachedToDivs.length; 
 
    } 
 
    cachedToDivs.eq(index).find('img').remove(); 
 
    var txt = cachedToDivs.eq(index).text().trim(); 
 
    cachedToDivs.eq(index).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + txt + '&nbsp;&nbsp;&nbsp;<img name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>'); 
 
    $(this).parent().hide(); 
 
    cachedToDivs.eq(index).show(); 
 
    $('.items > div:visible').slideUp('fast', function() { 
 
     $('.items #' + cachedToDivs.eq(index).attr('class')).slideDown('fast'); 
 
    }) 
 
    if(index == (cachedToDivs.length - 1)) { // on the last month remove next image 
 
     cachedToDivs.eq(index).find('img[name="next"]').remove(); 
 
    } 
 
    if(index == 0) { // on the first month remove prev image 
 
     cachedToDivs.eq(index).find('img[name="prev"]').remove(); 
 
    } 
 
    }); 
 
    cachedToDivs.eq((cachedToDivs.length - 1)).html('<img name="prev" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-previous-icon.png" width="20" height="15"/>&nbsp;&nbsp;&nbsp;' + cachedToDivs.eq(2).text().trim() + '&nbsp;&nbsp;&nbsp;<img name="next" src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/256/Actions-go-next-icon.png" width="20" height="15"/>'); 
 
    $('.months div:visible img[name="next"]').trigger('click'); 
 
});

.months { 
 
    display: inline-block; 
 
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<div class="months"> 
 
    <div class="082016">2016 august</div> 
 
    <div class="092016">2016 september</div> 
 
    <div class="102016">2016 october</div> 
 
</div> 
 
<div class="items"> 
 
    <div id="082016"> 
 
     <div class="item">August item</div> 
 
     <div class="item">August item</div> 
 
     <div class="item">August item</div> 
 
    </div> 
 
    <div id="092016"> 
 
     <div class="item">September item</div> 
 
     <div class="item">September item</div> 
 
     <div class="item">September item</div> 
 
    </div> 
 
    <div id="102016"> 
 
     <div class="item">October item</div> 
 
     <div class="item">October item</div> 
 
     <div class="item">October item</div> 
 
    </div> 
 
</div>