Membuat Tab Sederhana dengan JavaScript

• Menu 1
• Menu 2
• Menu 3

Isi 1

Isi 2

Isi 3

Membuat tab sederhana dengan Javascript

 Contoh CSS :

<style>

            .ul_menu{

                padding:0;

                display: block;

            }

            .ul_menu li{

                margin:0;

                float: left;

                display: inline-block;

                list-style: none;

                border:solid 1px #ccc;

                padding : 3px 8px 3px;

                cursor: pointer;

                transition: all 0.5s ease;

            }

            .ul_menu li:hover{

                background-color: rgb(192, 197, 248);

            }

            .box_menu{

                position: relative;

                border:solid 1px #ccc;

            }

        </style>

 Contoh HTML :

<fieldset>

            <legend class='box_menu'>

                <ul class='ul_menu' id=ul_menu>

                    <li><span class='classmenu' id="cmenu_1">Menu 1</span></li>

                    <li><span class='classmenu' id="cmenu_2">Menu 2</span></li>

                    <li><span class='classmenu' id="cmenu_3">Menu 3</span></li>

                </ul>

            </legend>

            <!-- ########################################################################### -->

            <div id="cisi_1">

                Isi 1

            </div>

            <!-- ########################################################################### -->

            <div id="cisi_2">

                Isi 2

            </div>

            <!-- ########################################################################### -->

            <div id="cisi_3" >

                Isi 3

            </div>

            <!-- ########################################################################### -->

        </fieldset>

.

Javascript :

<script>

           

           var ul_menu1=document.getElementById("ul_menu");

            var daftarmenu=ul_menu1.getElementsByTagName("li");

            for(var l=2; l<daftarmenu.length+1;l++){

                document.getElementById("cisi_"+l).style.display="none";

            }

           for(var n=1; n<daftarmenu.length+1;n++)

              document.getElementById("cmenu_"+n).onclick=function(){

                  var nomenu=this.id.split("_")[1];

                  for(var l=1; l<daftarmenu.length+1;l++){

                        document.getElementById("cisi_"+l).style.display="none";

                    }

                  document.getElementById("cisi_"+nomenu).style.display="block";

              };

            

          

        </script>