Tạo menu tab, danh sách động trên html web tĩnh bằng Javascript rất hay dùng trên các web phim

Hình Ảnh Demo

 css

 Web 2016

#sel1{
    cursor:pointer;
    background-color:rgb(200,200,200);
    padding-left:13px;
    padding-right:13px;
}
#sel2{
    cursor:pointer;
    background-color:rgb(150,150,150);
    padding-left:13px;
    padding-right:13px;
}
#sel3{
    cursor:pointer;
    background-color:rgb(150,150,150);
    padding-left:13px;
    padding-right:13px;
}
#resultsel1{
    display:block;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}
#resultsel2{
    display:none;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}
#resultsel3{
    display:none;
    position:relative;
    bottom:1px;
    width:100%;
    height:30px;
    background-color:rgb(200,200,200);
}

Javascript and html

Web 2016

<SCRIPT>
    var selected="sel1";
    var disp="resultsel1";
    function show(a,b)
    {
      document.getElementById(selected).style.backgroundColor = "rgb(150,150,150)";
      document.getElementById(disp).style.display = "none";
    
      document.getElementById(a).style.backgroundColor = "rgb(200,200,200)";      
      
      document.getElementById(b).style.display = "block";
    selected=a;
    disp=b;
    }
</SCRIPT>
<div width="100%">
    <span id='sel1' onclick="show('sel1','resultsel1');">home</span><span id='sel2' onclick="show('sel2','resultsel2');">div1</span><span id='sel3' onclick="show('sel3','resultsel3');">div2</span></div>
<div id="resultsel1">Home Page</div>
<div id="resultsel2">div2</div>
<div id="resultsel3">div3</div>

Link: http://jsfiddle.net/y76k4/

Ví dụ thực tế: