JSFiddle - React, Tailwind, and code Playground

by beabuzzers

HTML

<div class="resources">
    <a href="url1"></a>  
    <a href="url2"></a>  
    <a href="url3"></a>  
    <a href="url4"></a>    
</div>

/* index -= 1 */
<div class="link open-prev">click previous link</div> 
/* indexed [0] */
<div class="link open-current-link">click default link</div> 
/* index += 1 */
<div class="link open-next">click next link</div>

CSS

body {
    color: #fff;
}

.link { 
    width: 180px;
    height: 20px;
    padding: 10px;
    background-color: black;
    cursor: pointer;
    text-align: center;
}

JavaScript

/* get urls and store in an array */ 
var links = $( '.resources a[href*="url"]' );

/* click and open default link ! */ 
$('.open-current-link').on('click', function(){ 
    $( links[0] ).click();        
});

/* click and open next link */ 
$('.open-next').on('click', function(){  
    $( links[+=1] ).click();        
});

/* click and open previous link */
$('.open-prev').on('click', function(){
    $( links[-=1] ).click();      
});