[IA] Lab vezba 2. Zadaca 2 [2016]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zadaca 2</title>
    <script src="jquery-3.1.1.js"></script>
<style>


    button{

        width: 149px;
        padding: 4px;
        padding-left: 10px;
        text-align: left;
        margin-right: 0;
        background-color: cornflowerblue;
        color: white;
        border: solid;
        border-color: dimgray;
        border-width: 1px;
        font-style: italic;
        margin-left: 70px;
    }
    .tabs{
        width: 1000px;
        padding: 100px;
        background-color: lightgoldenrodyellow;
        color: blue;
        margin-top: 0;
        border: solid;
        border-color: blue;
        border-width: 0 1px 1px;
        margin-left: 75px;
        height: 500px;
    }
    #buttonsDiv{
        width: 1182px;
        padding: 10px;
        background-color: blue;
        border: solid;
        border: dimgray;
        border-width: 1px;
        margin-left: 75px;
        color: white;
    }
    a:hover{
        text-decoration: underline;
    }
    #mainDiv{
    }
</style>
</head>
<body onload="home()">

<script type="text/javascript">
    var momentalno=5;
    function smeniTab(x){
        if(momentalno!=x){
            $("#bt" + x).css({
                "background-color":"lightgoldenrodyellow",
                "font-weight": "bold",
                "color":"blue"
            });
            $("#bt" + momentalno).css({
                "background-color":"cornflowerblue",
                "font-weight": "normal",
                "color": "lightgoldenrodyellow"

            });
            $("#tab"+momentalno).hide();
            $("#tab" + x).show();
            momentalno=x;
        }

    }


</script>

<div id="buttonsDiv">
    <span style="margin-left: 30px; font-style: italic;"><a onclick="home()">THE HYPERMARKET</a></span>
    <br>
    <button id="bt1" onclick="smeniTab(1)">Food and drink</button>
    <button id="bt2" onclick="smeniTab(2)">Electronics</button>
    <button id="bt3" onclick="smeniTab(3)">Home and garden</button>
    <button id="bt4" onclick="smeniTab(4)">About us</button>
    <button id="bt5" onclick="smeniTab(5)">Contact</button>


</div>


<div id="mainDiv">

<div id="tab1" class="tabs">
    <span><b>WELCOME TO THE HYPERMARKET</b><br><br><br>It's Halloween, and we are waiting for you to come to our Hypermarket. We have sale on 90% of our food and drink products</span>
</div>
<div id="tab2" class="tabs">
    <span>HOT OFFER!!!<br> Come to our Hypermarket a buy the <b style="color: firebrick">Sony Xperia Z5</b> for just 250$,<br>or
    you can buy the headphones that will change your way<br>of listening music forever, the <b style="color: firebrick"> Beats Solo 3</b> for just 199$. </span>
</div>
<div id="tab3" class="tabs">
    <span>It's Halloween. Come to our Hypermarket and buy a perfect decoration for your garden and backyard.</span>
    Also we have some special decoratons for your home, that will make your house looks like a Dracula castle.
</div>
<div id="tab4" class="tabs">
    <span><b>THE HYPERMARKET</b> is a world wide hypermarket chain that has markets in 56 countries in the world.</span>
    We have the best prices, top quality products, and the best personal who take cares for our everyday clients.
    Our motto is "paint a smile", and that determins our mission and that is to make the clients satisfied and to bring all of the products closer to them.

</div>
<div id="tab5" class="tabs">
    <span>Contact us:<br>
           Email: <a style="color: blue">hypermarket@gmail.com</a> <br>
            Tel: 078/555-666
    </span>

</div>
    </div>
<script>
function  home() {
    $("#tab1").show();
    $("#tab2").hide();
    $("#tab3").hide();
    $("#tab4").hide();
    $("#tab5").hide();

}
</script>
</body>
</html>