JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<nav id="navigation">
    <ul>
        <li><a href="#" class="dugme" data-link="prvi" data-id="1">prvi</a></li>
        <li><a href="#" class="dugme" data-link="drugi" data-id="1">drugi</a></li>
        <li><a href="#" class="dugme" data-link="treci" data-id="1">treci</a></li>
        <li><a href="#" class="dugme" data-link="cetvrti" data-id="1">cetvrti</a></li>
    </ul>
</nav>
<div id="pozadina">
<div id="jedan"></div>
<div id="dva"></div>
<div id="tri"></div>
<div id="cetri"></div>
</div>

CSS

#navigation li{
    display: inline;
    color: black;
    border-right: solid 1px #FFFFFF;
    padding: 0 60px;
}

#jedan{
    display: none;
    width: 100px;
    height: 100px;
    border: solid 2px black;
    background: red;
    margin-left: 50px;
    margin-top: 50px;
    z-index: 999;
}

#dva{
    display: none;
    width: 100px;
    height: 100px;
    border: solid 2px black;
    background: blue;
    margin-left: 200px;
    margin-top: -100px;
    z-index: 999;
}

#tri{
    display: none;
    width: 100px;
    height: 100px;
    border: solid 2px black;
    background: white;
    margin-left: 350px;
    margin-top: -100px;
    z-index: 999;
}

#cetri{
    clear: both;
    display: none;
    width: 100px;
    height: 100px;
    border: solid 2px black;
    background: yellow;
    margin-left: 500px;
    margin-top: -100px;
    z-index: 999;
}

#pozadina{
    width: 700px;
    height: 200px;
    margin-top: 100px;
    border: solid 2px red;
    background: black;
    opacity: 0.3;
    z-index: 1;
}

JavaScript

var __button = document.getElementsByClassName('dugme');



for (var i = 0; i < __button.length; i++)
{
    __button[i].addEventListener('click', function(e){
        e.preventDefault();
                         
        var __action = this.getAttribute('data-link');
        
        if (__action === 'prvi')
        {
            $('#jedan').toggle();
        }
                         
        else if (__action === 'drugi')
        {
            $('#dva').toggle();
        }
        
        if (__action === 'treci')
        {
            $('#tri').toggle();
        }
                         
        else if (__action === 'cetvrti')
        {
            $('#cetri').toggle();
        }
                         
    }, false);
}