zavihki, tabs

zavihki, tabs

X

Zavihki vodoravno

Vodoravni zavihki so element uporabniškega vmesnika, kjer so zavihki razporejeni v vrstici, običajno na vrhu vsebinskega prostora. Ta postavitev omogoča učinkovito uporabo vodoravnega prostora in je priljubljena pri organizaciji vsebine v aplikacijah in spletnih straneh.

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>zavihki, tabs</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<style>
        * {
            box-sizing: border-box;
        }
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background: #f1f1f1;
        }
        .links {
            background: inherit;
            float: left;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
            text-decoration: none;
            color: black;
        }
        .links:hover {
            background: whitesmoke;
        }
        .links.active {
            background: lightgray;
        }
        .links.inactive {
            background: transparent;
        }
        /* v vsebinskem razredu lahko določimo višino in širino elementa, ki se bo prikazal, ko se premikamo
        miško nad elementom a */
        .content {
            display: none;
            padding: 6px 12px;
            background: lightgray;
        }
        .content img {
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
<div class="tab">
    <span class="links" onmouseover="openSub(event, '1')">DEMO 01</span>
    <span class="links" onmouseover="openSub(event, '2')">DEMO 02</span>
    <span class="links" onmouseover="openSub(event, '3')">DEMO 03</span>
    <span class="links" onmouseover="openSub(event, '4')">DEMO 04</span>
    <span class="links" onmouseover="openSub(event, '5')">DEMO 05</span>
    <span class="links" onmouseover="openSub(event, '6')">DEMO 06</span>
    <span class="links" onmouseover="openSub(event, '7')">DEMO 07</span>
    <span class="links" onmouseover="openSub(event, '8')">DEMO 08</span>
    <span class="links" onmouseover="openSub(event, '9')">DEMO 09</span>
    <span class="links" onmouseover="openSub(event, '10')">DEMO 10</span>
</div>

<div id="1" class="content" onmouseleave="closeSub()">
    <p>TEST 01</p>
</div>

<div id="2" class="content" onmouseleave="closeSub()">
    <p>TEST 02</p>
</div>

<div id="3" class="content" onmouseleave="closeSub()">
    <p>TEST 03</p>
</div>

<div id="4" class="content" onmouseleave="closeSub()">
    <p>TEST 04</p>
</div>

<div id="5" class="content" onmouseleave="closeSub()">
    <p>TEST 05</p>
</div>

<div id="6" class="content" onmouseleave="closeSub()">
    <p>TEST 06</p>
</div>

<div id="7" class="content" onmouseleave="closeSub()">
    <p>TEST 07</p>
</div>

<div id="8" class="content" onmouseleave="closeSub()">
    <p>TEST 08</p>
</div>

<div id="9" class="content" onmouseleave="closeSub()">
    <p>TEST 09</p>
</div>

<div id="10" class="content" onmouseleave="closeSub()">
    <p>TEST 10</p>
</div>

<script>
    function openSub(evt, a) {
        let i, content, links;
        // vsebina je skrita
        content = document.getElementsByClassName("content");
        for (i = 0; i < content.length; i++) {
            content[i].style.display = "none";
        }
        // ko gremo čez element, postane aktiven in spremeni barvo
        links = document.getElementsByClassName("links");
        for (i = 0; i < links.length; i++) {
            links[i].className = links[i].className.replace(" active", "");
        }
        // vsebina postane aktivna, ko element a premaknemo s kazalcem miške
        document.getElementById(a).style.display = "block";
        evt.currentTarget.className += " active";
    }

function closeSub() {
        let lin, all, i;
        all = document.querySelectorAll(".content");
        lin = document.querySelectorAll(".links");
        // zanka for definira pogoj in določi vrednost, v našem primeru ime spremenljivke i
        for (i = 0; i < all.length; i++) {
            // ko je element zapustimo (odpremo drugega), se zapre
            all[i].style.display = "none";
            // aktivni razred smo zamenjali z neaktivnim, da bi spremenili ozadje, ko je element zapuščen
            lin[i].className = lin[i].className.replace("active", "inactive");
        }
    }
</script>
</body>
</html>