Web Programming Training By OM SIR Call for free Demo :9320957717/18

how to create tabbed menu

Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects:


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {font-family: "Lato", sans-serif;}

    /* Style the tab */
    div.tab {
        overflow: hidden;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
    }

    /* Style the links inside the tab */
    div.tab a {
        float: left;
        display: block;
        color: black;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        transition: 0.3s;
        font-size: 17px;
    }

    /* Change background color of links on hover */
    div.tab a:hover {
        background-color: #ddd;
    }

    /* Create an active/current tablink class */
    div.tab a:focus, .active {
        background-color: #ccc;
    }

    /* Style the tab content */
    .tabcontent {
        display: none;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-top: none;
    }
    </style>
    </head>
    <body>

    <p>Click on the links inside the tabbed menu:</p>

    <div class="tab">
      <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')">London</a>
      <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a>
      <a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a>
    </div>

    <div id="London" class="tabcontent">
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>

    <div id="Paris" class="tabcontent">
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p>
    </div>

    <div id="Tokyo" class="tabcontent">
      <h3>Tokyo</h3>
      <p>Tokyo is the capital of Japan.</p>
    </div>

    <script>
    function openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    </script>
       
    </body>
    </html>

    Previous
    Next Post »

    1 comments:

    Write comments
    Garima Ahuja
    AUTHOR
    23 October 2017 at 02:08 delete

    we are also work on it but your blogs is seriously very informative for technologies
    https://sisgain.com/hire-ipad-developer

    Reply
    avatar