经典导航栏 - 爱码网

360导航

切换背景颜色、音乐

HTML代码

   <ul id="nav" >
        <li class="liClick">我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
        <li>新闻头条</li>
        <li>我的主页</li>
    </ul>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>
    <audio src="http://www.w3school.com.cn/i/song.ogg"></audio>

css代码

*{
    margin: 0;
    padding: 0;
}
#nav{
    list-style-type: none;
    margin: 50px auto 0px;
    width: 960px;
    height: 38px;
    color: #333;
    font-size: 14px;
    padding: 0px;
    overflow: hidden;
}
#nav li{
    width: 105px;
    float: left;
    text-align: center;
    line-height: 38px;
    border-top: #c9cbce solid 1px;
    border-left: #c9cbce solid 1px;
    border-bottom:  #c9cbce solid 1px;
    cursor: pointer;
}
#nav li:last-child{
    border-right: #c9cbce solid 1px;
}
#nav .liClick{
    border-top: #54b82a solid 2px;
    border-bottom: none;
}
#nav span{
    width: 100%;
    height: 38px;
    display: block;
    position: relative;
    z-index: -1;
}

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
        $(document).ready(function(e){
                //点击li
                $(\'#nav li\').click(function(e){
                    $(\'.liClick\').removeClass(\'liClick\');
                    $(this).addClass(\'liClick\');
                });
                //每一个li添加一个底色
                var color=[\'#b9d329\',\'#c0ebf7\',\'#b9d329\',\'#69bcf3\',\'#79d9f3\',\'#fa5f94\',\'#acd180\',\'#fab4cc\',\'#ffaa5b\'];
                $(\'#nav li\').append(\'<span>\');
                $(\'#nav span\').each(function(index,elment){
                    $(this).css(\'background-color\',color[index]);
                });
                //移动到li上颜色升起
                $(\'#nav li\').hover(function(){
                    $(this).children(\'span\').animate({\'top\':-38},200);
                    //获得当前li的索引编号
                    var index=$(this).index();
                    $(\'audio\').get(index).play();//播放第index的音乐
                },function(){
                    $(this).children(\'span\').animate({\'top\':0},200);
                    var index=$(this).index();
                    $(\'audio\').get(index).pause();//播放第index的音乐
                });
            });
    </script>