每个导航对应一个区域内容，当选择特定区域时菜单会自动切换，一般会有高亮样式。主要应用在各大电商的首页导航里。

代码如下：

    <style>
        div.jsnav{
            width:700px;
            margin:0 auto;
        }
        div.jsnav>div>span{
            text-align:center;
            display:inline-block;
            width:40px;
            border:1px solid gold;
            margin:5px 30px;
        }
        div.jsnav>div:last-child{
            position:relative;
            left:0px;
            width:100px;
            height:3px;
            background-color:palegreen;
            transition-duration:1s;
            transition-timing-function:cubic-bezier(0,1.92,1,-1.67);
        }
    </style>
    <div class="jsnav">
        <div>
            <span>导航1</span>
            <span>导航2</span>
            <span>导航3</span>
            <span>导航4</span>
            <span>导航5</span>
        </div>
        <div></div>
    </div>
    <div class="jsnav">
        <div>
            <span>导航1</span>
            <span>导航2</span>
            <span>导航3</span>
            <span>导航4</span>
            <span>导航5</span>
        </div>
        <div></div>
    </div>
    <div class="jsnav">
        <div>
            <span>导航1</span>
            <span>导航2</span>
            <span>导航3</span>
            <span>导航4</span>
            <span>导航5</span>
        </div>
        <div></div>
    </div>
    <script>
        var nav=document.querySelectorAll(".jsnav div:first-child");
        var slide=document.querySelectorAll(".jsnav div:last-child");
        for(var i=0;i<nav.length;i++){
            var span=nav[i].querySelectorAll(".jsnav span");
            for(var j=0;j<span.length;j++){
                span[j].i=i
                span[j].j=j;
                span[j].onmouseover=function(){
                slide[this.i].style.left=this.j*100+"px";
                }
            }
        }

    </script>

    
    

        
导航1导航2导航3导航4导航5
        

    
    

        
导航1导航2导航3导航4导航5
        

    
    

        
导航1导航2导航3导航4导航5